React.js 小書 Lesson24 - PropTypes 和組件參數驗證

zlyBear 發布于2019-08-21 17:33 / 2306人閱讀

摘要：的靈活性體現在弱類型高階函數等語言特性上。所以近年來出現了類似和等技術，來彌補這方面的缺陷。組件參數驗證在構建大型的組件庫的時候相當有用，可以幫助我們迅速定位這種類型錯誤，讓我們組件開發更加規范。下一節中我們將介紹小書實戰分析評論功能四。

React.js 小書 Lesson24 - PropTypes 和組件參數驗證

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson24

轉載請注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

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

都說 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 (
      
        
          {comment.username} ：
        
        {comment.content}
      
    )
  }
}

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

JavaScript 在這種情況下是不會報任何錯誤的，但是頁面就是顯示不正常，然后我們踏上了漫漫 debug 的路程。這里的例子還是過于簡單，容易 debug，但是對于比較復雜的成因和情況是比較難處理的。

于是 React.js 就提供了一種機制，讓你可以給組件的配置參數加上類型驗證，就用上述的評論組件例子，你可以配置 Comment 只能接受對象類型的 comment 參數，你傳個數字進來組件就強制報錯。

import React, { Component, PropTypes } from "react"

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

  render () {
    const { comment } = this.props
    return (
      
        
          {comment.username} ：
        
        {comment.content}
      
    )
  }
}

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

這時候如果再往里面傳入數字，瀏覽器就會報錯：

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

雖然 propTypes 幫我們指定了參數類型，但是并沒有說這個參數一定要傳入，事實上，這些參數默認都是可選的。可選參數我們可以通過配置 defaultProps，讓它在不傳入的時候有默認值。但是我們這里并沒有配置 defaultProps，所以如果直接用而不傳入任何參數的話，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，有時候有點麻煩，但是是值得的。

下一節中我們將介紹《React.js 小書 Lesson25 - 實戰分析：評論功能（四）》。

云服務器 GPU云服務器驗證組件 React.js react.js cdn 組件和組件通信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89679.html

寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
React.js 小書 Lesson23 - dangerouslySetHTML 和 style

摘要：那是因為設置可能會導致跨站腳本攻擊，所以團隊認為把事情搞復雜可以防止警示大家濫用這個屬性。下一節中我們將介紹小書和組件參數驗證。 React.js 小書 Lesson23 - dangerouslySetHTML 和 style 屬性本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson23 轉載請注明出處，保留原文鏈接以及作者...

curried 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson25 - 實戰分析：評論功能（四）

摘要：接下來是實戰環節，我們會繼續上一階段的例子，把評論功能做得更加復雜一點。把已經發布的評論持久化，存放到瀏覽器的中。評論顯示發布日期，如秒前，分鐘前，并且會每隔秒更新發布日期。事件監聽方法，。下一節中我們將介紹小書實戰分析評論功能五。 React.js 小書 Lesson25 - 實戰分析：評論功能（四）本文作者：胡子大哈本文原文：http://huziketang.com/book...

mozillazg 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson27 - 實戰分析：評論功能（六）

摘要：所以我們給評論組件加上刪除評論的功能，這樣就可以刪除不想要的評論了。輸入這是代碼塊，這是正常內容。到目前為止，第二階段的實戰已經全部完成，你可以在這里找到完整的代碼。下一節中我們將介紹小書高階組件。 React.js 小書 Lesson27 - 實戰分析：評論功能（六）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson27 ...

Freeman 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson26 - 實戰分析：評論功能（五）

摘要：修改請輸入用戶名請輸入評論內容我們增加了和分別用于加載和保存評論列表數據?，F在發布評論，然后刷新可以看到我們的評論并不會像以前一樣消失。非常的不錯，持久化評論的功能也完成了。下一節中我們將介紹小書實戰分析評論功能六。 React.js 小書 Lesson26 - 實戰分析：評論功能（五）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/...

Nekron 2019-08-21 17:33 評論0 收藏0