React 快速上手 - 10 類型檢查 PropTypes

目錄

• 01 前言
• 02 開發環境搭建
• 03 腳手架建立項目 一切都是組件
• 04 基礎特性 JSX、Props、State、Lifecycle、Event、Style
• 05 組件渲染控制
• 06 容器組件、展現組件
• 07 前端路由 react-router
• 08 狀態管理 react-redux
• 09 數據請求 fetch
• 10 屬性類型檢查 prop-types

React 快速上手 - 10 類型檢查 PropTypes

目標

• 瞭解類型檢查的重要性
• 類型檢查的使用及調試
• 類型檢查的一些技巧

環境

• react 16.3.2
• prop-types 15.6.1

咱們爲何要 類型檢查

咱們先來看一份 rollbar 公司對 1000+ 項目的錯誤回收分析 top10

文章參考: Top 10 JavaScript errors from 1000+ projects

幾乎都是由於類型而發生的錯誤

好比定義 let prodList = [] , 你代碼中 prodList.push(...)

可是初始的時候被設置 prodList = 123 並且沒有任何提示, 那運行 push(...) 確定要報未知方法的錯誤

這種問題在自由的 JavaScript 世界很廣泛，若是在 編譯 運行 兩個階段都沒提示的話，排錯是很麻煩的，全靠經驗和對業務的熟悉 (陳年老項目又沒文檔簡直是地獄)

因此咱們要把問題消滅在萌芽中，就是申明對象的時候同時把類型也定義掉了， react 的自帶方案是 PropTypes 組件

固然還有 Flow TypeScript 我我的比較喜歡 TypeScript 這在之後的進階文章我再寫

PropTypes 是一個在 編碼 階段提供類型檢查的方案 有提示老是好的，那咱們開始

PropTypes 使用

老樣子，先來個基礎簡單的例子

1 簡單例子

• 導入包

import PropTypes from 'prop-types'

• 編寫組件

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

• 編寫類型檢查

Greeting.propTypes = {
  name: PropTypes.string
}

設置 name 屬性類型爲 string 字符串

• 容器

<div>
  <Greeting name={123} />
</div>

顯然這裏設置數字和定義不一致

• 頁面打印

頁面能正常顯示，沒有錯誤，這是由於錯誤以 console 方式反饋

• 頁面錯誤

好吧~ 有提示就好哈~

2 不一樣的驗證器

// 數組、布爾、函數、數字、對象、字符串、symbol
MyComponent.propTypes = {
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 任何東西均可以被渲染:numbers, strings, elements,或者是包含這些類型的數組(或者是片斷)。
  optionalNode: PropTypes.node,

  // 一個 React 元素。
  optionalElement: PropTypes.element,

  // 你也能夠聲明一個 prop 是類的一個實例。
  // 使用 JS 的 instanceof 運算符。
  optionalMessage: PropTypes.instanceOf(Message),

  // 你能夠聲明 prop 是特定的值，相似於枚舉
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 一個對象能夠是多種類型其中之一
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 一個某種類型的數組
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 屬性值爲某種類型的對象
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 一個特定形式的對象
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // 你可使用 `isRequired' 連接上述任何一個，以確保在沒有提供 prop 的狀況下顯示警告。
  requiredFunc: PropTypes.func.isRequired,

  // 任何數據類型的值
  requiredAny: PropTypes.any.isRequired,

  // 你也能夠聲明自定義的驗證器。若是驗證失敗返回 Error 對象。不要使用 `console.warn` 或者 throw ，
  // 由於這不會在 `oneOfType` 類型的驗證器中起做用。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // 也能夠聲明`arrayOf`和`objectOf`類型的驗證器，若是驗證失敗須要返回Error對象。
  // 會在數組或者對象的每個元素上調用驗證器。驗證器的前兩個參數分別是數組或者對象自己，
  // 以及當前元素的鍵值。
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

3 限制單個子代

代碼

// 組件
const OnlyOneChild = props => {
  const children = props.children
  return <div>{children}</div>
}
OnlyOneChild.propTypes = {
  children: PropTypes.element.isRequired
}

// 容器
<OnlyOneChild>
  <h3>第一個子節點</h3>
  <h3>第二個子節點</h3>
</OnlyOneChild>

打印

4 屬性默認值

代碼

// 組件
const DefaultVal = props => {
  return <h3>{props.name}</h3>
}
DefaultVal.defaultProps = {
  name: '我是默認值!'
}

// 容器
<div>
  <DefaultVal />
</div>

若是父組件沒有設置並傳入 name ，defaultProps 將確保 this.props.name 將有一個默認值。

打印

代碼

• 8-propTypes.js

參考

• Top 10 JavaScript errors from 1000+ projects
• prop-types

---

© 會煮咖啡的貓咪