PropTypes 和組件參數驗證

咱們來了到了一個很是尷尬的章節，不少初學的朋友可能對這一章的知識點不屑一顧，以爲用不用對程序功能也沒什麼影響。但其實這一章節的知識在你構建多人協做、大型的應用程序的時候也是很是重要的，不可忽視。

都說 JavaScript 是一門靈活的語言 —— 這就是像是說「你是個好人」同樣，凡事都有背後沒有說出來的話。JavaScript 的靈活性體如今弱類型、高階函數等語言特性上。而語言的弱類型通常來講確實讓咱們寫代碼很爽，可是也很容易出 bug。

變量沒有固定類型能夠隨意賦值，在咱們構建大型應用程序的時候並非什麼好的事情。你寫下了 let a = {} ，若是這是個共享的狀態而且在某個地方把 a = 3，那麼 a.xxx 就會讓程序崩潰了。而這種很是隱晦可是低級的錯誤在強類型的語言例如 C/C++、Java 中是不可能發生的，這些代碼連編譯都不可能經過，也別妄圖運行。

大型應用程序的構建其實更適合用強類型的語言來構建，它有更多的規則，能夠幫助咱們在編寫代碼階段、編譯階段規避掉不少問題，讓咱們的應用程序更加的安全。JavaScript 早就脫離了玩具語言的領域而且投入到大型的應用程序的生產活動中，由於它的弱類型，經常意味着不是很安全。因此近年來出現了相似 TypeScript 和 Flow 等技術，來彌補 JavaScript 這方面的缺陷。

React.js 的組件實際上是爲了構建大型應用程序而生。可是由於 JavaScript 這樣的特性，你在編寫了一個組件之後，根本不知作別人會怎麼使用你的組件，往裏傳什麼亂七八糟的參數，例如評論組件：

class Comment extends Component {
  const { comment } = this.props
  render () {
    return (
      <div className='comment'>
        <div className='comment-user'>
          <span>{comment.username} </span>：
        </div>
        <p>{comment.content}</p>
      </div>
    )
  }
}

可是別人往裏面傳一個數字你拿他一點辦法都沒有：

<Comment comment={1} />

JavaScript 在這種狀況下是不會報任何錯誤的，可是頁面就是顯示不正常，而後咱們踏上了漫漫 debug 的路程。這裏的例子仍是過於簡單，容易 debug，可是對於比較複雜的成因和狀況是比較難處理的。

因而 React.js 就提供了一種機制，讓你能夠給組件的配置參數加上類型驗證，就用上述的評論組件例子，你能夠配置 Comment 只能接受對象類型的 comment 參數，你傳個數字進來組件就強制報錯。咱們這裏先安裝一個 React 提供的第三方庫 prop-types：

npm install --save prop-types

它能夠幫助咱們驗證 props 的參數類型，例如：

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object
  }

  render () {
    const { comment } = this.props
    return (
      <div className='comment'>
        <div className='comment-user'>
          <span>{comment.username} </span>：
        </div>
        <p>{comment.content}</p>
      </div>
    )
  }
}

注意咱們在文件頭部引入了 PropTypes，而且給 Comment 組件類添加了類屬性 propTypes，裏面的內容的意思就是你傳入的 comment 類型必須爲 object（對象）。

這時候若是再往裏面傳入數字，瀏覽器就會報錯：

出錯信息明確告訴咱們：你給 Comment 組件傳了一個數字類型的 comment，而它應該是 object。你就清晰知道問題出在哪裏了。

雖然 propTypes 幫咱們指定了參數類型，可是並無說這個參數必定要傳入，事實上，這些參數默認都是可選的。可選參數咱們能夠經過配置 defaultProps，讓它在不傳入的時候有默認值。可是咱們這裏並無配置 defaultProps，因此若是直接用 <Comment /> 而不傳入任何參數的話，comment 就會是 undefined，comment.username 會致使程序報錯：

 

 這個出錯信息並不夠友好。咱們能夠經過 isRequired 關鍵字來強制組件某個參數必須傳入：

...
static propTypes = {
  comment: PropTypes.object.isRequired
}
...

那麼會得到一個更加友好的出錯信息，查錯會更方便：

React.js 提供的 PropTypes 提供了一系列的數據類型能夠用來配置組件的參數：

PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.node
PropTypes.element
...

更多類型及其用法能夠參看官方文檔： Typechecking With PropTypes - React。

組件參數驗證在構建大型的組件庫的時候至關有用，能夠幫助咱們迅速定位這種類型錯誤，讓咱們組件開發更加規範。另外也起到了一個說明文檔的做用，若是你們都約定都寫 propTypes ，那你在使用別人寫的組件的時候，只要看到組件的 propTypes就清晰地知道這個組件到底可以接受什麼參數，什麼參數是可選的，什麼參數是必選的。

總結

經過 PropTypes 給組件的參數作類型限制，能夠在幫助咱們迅速定位錯誤，這在構建大型應用程序的時候特別有用；另外，給組件加上 propTypes，也讓組件的開發、使用更加規範清晰。

這裏建議你們寫組件的時候儘可能都寫 propTypes，有時候有點麻煩，可是是值得的。

下一節：實戰分析：評論功能（四）

上一節：dangerouslySetHTML 和 style 屬性