成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React.js 小書 Lesson24 - PropTypes 和組件參數(shù)驗證

zlyBear / 2367人閱讀

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

React.js 小書 Lesson24 - PropTypes 和組件參數(shù)驗證 
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson24

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

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

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

都說 JavaScript 是一門靈活的語言 —— 這就是像是說“你是個好人”一樣，凡事都有背后沒有說出來的話。JavaScript 的靈活性體現(xiàn)在弱類型、高階函數(shù)等語言特性上。而語言的弱類型一般來說確實讓我們寫代碼很爽，但是也很容易出 bug。

變量沒有固定類型可以隨意賦值，在我們構(gòu)建大型應(yīng)用程序的時候并不是什么好的事情。你寫下了 let a = {} ，如果這是個共享的狀態(tài)并且在某個地方把 a = 3，那么 a.xxx 就會讓程序崩潰了。而這種非常隱晦但是低級的錯誤在強類型的語言例如 C/C++、Java 中是不可能發(fā)生的，這些代碼連編譯都不可能通過，也別妄圖運行。

大型應(yīng)用程序的構(gòu)建其實更適合用強類型的語言來構(gòu)建，它有更多的規(guī)則，可以幫助我們在編寫代碼階段、編譯階段規(guī)避掉很多問題，讓我們的應(yīng)用程序更加的安全。JavaScript 早就脫離了玩具語言的領(lǐng)域并且投入到大型的應(yīng)用程序的生產(chǎn)活動中，因為它的弱類型，常常意味著不是很安全。所以近年來出現(xiàn)了類似 TypeScript 和 Flow 等技術(shù)，來彌補 JavaScript 這方面的缺陷。

React.js 的組件其實是為了構(gòu)建大型應(yīng)用程序而生。但是因為 JavaScript 這樣的特性，你在編寫了一個組件以后，根本不知道別人會怎么使用你的組件，往里傳什么亂七八糟的參數(shù)，例如評論組件：

class Comment extends Component {
  const { comment } = this.props
  render () {
    return (
      

        

          {comment.username} ：
        

        
{comment.content}

      

    )
  }
}

但是別人往里面?zhèn)饕粋€數(shù)字你拿他一點辦法都沒有：

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

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

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，里面的內(nèi)容的意思就是你傳入的 comment 類型必須為 object（對象）。

這時候如果再往里面?zhèn)魅霐?shù)字，瀏覽器就會報錯：

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

雖然 propTypes 幫我們指定了參數(shù)類型，但是并沒有說這個參數(shù)一定要傳入，事實上，這些參數(shù)默認都是可選的。可選參數(shù)我們可以通過配置 defaultProps，讓它在不傳入的時候有默認值。但是我們這里并沒有配置 defaultProps，所以如果直接用 而不傳入任何參數(shù)的話，comment 就會是 undefined，comment.username 會導(dǎo)致程序報錯：

這個出錯信息并不夠友好。我們可以通過 isRequired 關(guān)鍵字來強制組件某個參數(shù)必須傳入：

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

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

React.js 提供的 PropTypes 提供了一些列的數(shù)據(jù)類型可以用來配置組件的參數(shù)：

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

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

組件參數(shù)驗證在構(gòu)建大型的組件庫的時候相當有用，可以幫助我們迅速定位這種類型錯誤，讓我們組件開發(fā)更加規(guī)范。另外也起到了一個說明文檔的作用，如果大家都約定都寫 propTypes ，那你在使用別人寫的組件的時候，只要看到組件的 propTypes 就清晰地知道這個組件到底能夠接受什么參數(shù)，什么參數(shù)是可選的，什么參數(shù)是必選的。

總結(jié)

通過 PropTypes 給組件的參數(shù)做類型限制，可以在幫助我們迅速定位錯誤，這在構(gòu)建大型應(yīng)用程序的時候特別有用；另外，給組件加上 propTypes，也讓組件的開發(fā)、使用更加規(guī)范清晰。

這里建議大家寫組件的時候盡量都寫 propTypes，有時候有點麻煩，但是是值得的。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/89679.html

相關(guān)文章

  • 寫一本關(guān)于 React.js 的小書

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

    Scorpion 評論0 收藏0

  • React.js 小書 Lesson23 - dangerouslySetHTML 和 style

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

    curried 評論0 收藏0

  • React.js 小書 Lesson25 - 實戰(zhàn)分析：評論功能（四）

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

    mozillazg 評論0 收藏0

  • React.js 小書 Lesson27 - 實戰(zhàn)分析：評論功能（六）

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

    Freeman 評論0 收藏0

  • React.js 小書 Lesson26 - 實戰(zhàn)分析：評論功能（五）

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

    Nekron 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<