資訊專(zhuān)欄INFORMATION COLUMN
摘要：的靈活性體現(xiàn)在弱類(lèi)型高階函數(shù)等語(yǔ)言特性上。所以近年來(lái)出現(xiàn)了類(lèi)似和等技術(shù)，來(lái)彌補(bǔ)這方面的缺陷。組件參數(shù)驗(yàn)證在構(gòu)建大型的組件庫(kù)的時(shí)候相當(dāng)有用，可以幫助我們迅速定位這種類(lèi)型錯(cuò)誤，讓我們組件開(kāi)發(fā)更加規(guī)范。下一節(jié)中我們將介紹小書(shū)實(shí)戰(zhàn)分析評(píng)論功能四。
React.js 小書(shū) Lesson24 - PropTypes 和組件參數(shù)驗(yàn)證
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson24
轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息
在線(xiàn)閱讀：http://huziketang.com/books/react
我們來(lái)了到了一個(gè)非常尷尬的章節(jié)，很多初學(xué)的朋友可能對(duì)這一章的知識(shí)點(diǎn)不屑一顧，覺(jué)得用不用對(duì)程序功能也沒(méi)什么影響。但其實(shí)這一章節(jié)的知識(shí)在你構(gòu)建多人協(xié)作、大型的應(yīng)用程序的時(shí)候也是非常重要的，不可忽視。
都說(shuō) JavaScript 是一門(mén)靈活的語(yǔ)言 —— 這就是像是說(shuō)“你是個(gè)好人”一樣，凡事都有背后沒(méi)有說(shuō)出來(lái)的話(huà)。JavaScript 的靈活性體現(xiàn)在弱類(lèi)型、高階函數(shù)等語(yǔ)言特性上。而語(yǔ)言的弱類(lèi)型一般來(lái)說(shuō)確實(shí)讓我們寫(xiě)代碼很爽，但是也很容易出 bug。
變量沒(méi)有固定類(lèi)型可以隨意賦值，在我們構(gòu)建大型應(yīng)用程序的時(shí)候并不是什么好的事情。你寫(xiě)下了 let a = {} ，如果這是個(gè)共享的狀態(tài)并且在某個(gè)地方把 a = 3，那么 a.xxx 就會(huì)讓程序崩潰了。而這種非常隱晦但是低級(jí)的錯(cuò)誤在強(qiáng)類(lèi)型的語(yǔ)言例如 C/C++、Java 中是不可能發(fā)生的，這些代碼連編譯都不可能通過(guò)，也別妄圖運(yùn)行。
大型應(yīng)用程序的構(gòu)建其實(shí)更適合用強(qiáng)類(lèi)型的語(yǔ)言來(lái)構(gòu)建，它有更多的規(guī)則，可以幫助我們?cè)诰帉?xiě)代碼階段、編譯階段規(guī)避掉很多問(wèn)題，讓我們的應(yīng)用程序更加的安全。JavaScript 早就脫離了玩具語(yǔ)言的領(lǐng)域并且投入到大型的應(yīng)用程序的生產(chǎn)活動(dòng)中，因?yàn)樗娜躅?lèi)型，常常意味著不是很安全。所以近年來(lái)出現(xiàn)了類(lèi)似 TypeScript 和 Flow 等技術(shù)，來(lái)彌補(bǔ) JavaScript 這方面的缺陷。
React.js 的組件其實(shí)是為了構(gòu)建大型應(yīng)用程序而生。但是因?yàn)?JavaScript 這樣的特性，你在編寫(xiě)了一個(gè)組件以后，根本不知道別人會(huì)怎么使用你的組件，往里傳什么亂七八糟的參數(shù)，例如評(píng)論組件：
class Comment extends Component {
const { comment } = this.props
render () {
return (
{comment.username} ：
{comment.content}
)
}
}
但是別人往里面?zhèn)饕粋€(gè)數(shù)字你拿他一點(diǎn)辦法都沒(méi)有：
JavaScript 在這種情況下是不會(huì)報(bào)任何錯(cuò)誤的，但是頁(yè)面就是顯示不正常，然后我們踏上了漫漫 debug 的路程。這里的例子還是過(guò)于簡(jiǎn)單，容易 debug，但是對(duì)于比較復(fù)雜的成因和情況是比較難處理的。
于是 React.js 就提供了一種機(jī)制，讓你可以給組件的配置參數(shù)加上類(lèi)型驗(yàn)證，就用上述的評(píng)論組件例子，你可以配置 Comment 只能接受對(duì)象類(lèi)型的 comment 參數(shù)，你傳個(gè)數(shù)字進(jìn)來(lái)組件就強(qiáng)制報(bào)錯(cuò)。
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}
)
}
}
注意我們?cè)谖募^部引入了 PropTypes，并且給 Comment 組件類(lèi)添加了類(lèi)屬性 propTypes，里面的內(nèi)容的意思就是你傳入的 comment 類(lèi)型必須為 object（對(duì)象）。
這時(shí)候如果再往里面?zhèn)魅霐?shù)字，瀏覽器就會(huì)報(bào)錯(cuò)：
出錯(cuò)信息明確告訴我們：你給 Comment 組件傳了一個(gè)數(shù)字類(lèi)型的 comment，而它應(yīng)該是 object。你就清晰知道問(wèn)題出在哪里了。
雖然 propTypes 幫我們指定了參數(shù)類(lèi)型，但是并沒(méi)有說(shuō)這個(gè)參數(shù)一定要傳入，事實(shí)上，這些參數(shù)默認(rèn)都是可選的。可選參數(shù)我們可以通過(guò)配置 defaultProps，讓它在不傳入的時(shí)候有默認(rèn)值。但是我們這里并沒(méi)有配置 defaultProps，所以如果直接用
這個(gè)出錯(cuò)信息并不夠友好。我們可以通過(guò) isRequired 關(guān)鍵字來(lái)強(qiáng)制組件某個(gè)參數(shù)必須傳入：
...
static propTypes = {
comment: PropTypes.object.isRequired
}
...
那么會(huì)獲得一個(gè)更加友好的出錯(cuò)信息，查錯(cuò)會(huì)更方便：
React.js 提供的 PropTypes 提供了一些列的數(shù)據(jù)類(lèi)型可以用來(lái)配置組件的參數(shù)：
PropTypes.array PropTypes.bool PropTypes.func PropTypes.number PropTypes.object PropTypes.string PropTypes.node PropTypes.element ...
更多類(lèi)型及其用法可以參看官方文檔： Typechecking With PropTypes - React。
組件參數(shù)驗(yàn)證在構(gòu)建大型的組件庫(kù)的時(shí)候相當(dāng)有用，可以幫助我們迅速定位這種類(lèi)型錯(cuò)誤，讓我們組件開(kāi)發(fā)更加規(guī)范。另外也起到了一個(gè)說(shuō)明文檔的作用，如果大家都約定都寫(xiě) propTypes ，那你在使用別人寫(xiě)的組件的時(shí)候，只要看到組件的 propTypes 就清晰地知道這個(gè)組件到底能夠接受什么參數(shù)，什么參數(shù)是可選的，什么參數(shù)是必選的。
總結(jié)通過(guò) PropTypes 給組件的參數(shù)做類(lèi)型限制，可以在幫助我們迅速定位錯(cuò)誤，這在構(gòu)建大型應(yīng)用程序的時(shí)候特別有用；另外，給組件加上 propTypes，也讓組件的開(kāi)發(fā)、使用更加規(guī)范清晰。
這里建議大家寫(xiě)組件的時(shí)候盡量都寫(xiě) propTypes，有時(shí)候有點(diǎn)麻煩，但是是值得的。
下一節(jié)中我們將介紹《React.js 小書(shū) Lesson25 - 實(shí)戰(zhàn)分析：評(píng)論功能（四）》。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89679.html
摘要：因?yàn)楣ぷ髦幸恢痹谑褂?，也一直以?lái)想總結(jié)一下自己關(guān)于的一些知識(shí)經(jīng)驗(yàn)。于是把一些想法慢慢整理書(shū)寫(xiě)下來(lái)，做成一本開(kāi)源免費(fèi)專(zhuān)業(yè)簡(jiǎn)單的入門(mén)級(jí)別的小書(shū)，提供給社區(qū)。本書(shū)的后續(xù)可能會(huì)做成視頻版本，敬請(qǐng)期待。本作品采用署名禁止演繹國(guó)際許可協(xié)議進(jìn)行許可 React.js 小書(shū) 本文作者：胡子大哈本文原文：React.js 小書(shū) 轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息 在線(xiàn)閱讀：http://huzi...
摘要：那是因?yàn)樵O(shè)置可能會(huì)導(dǎo)致跨站腳本攻擊，所以團(tuán)隊(duì)認(rèn)為把事情搞復(fù)雜可以防止警示大家濫用這個(gè)屬性。下一節(jié)中我們將介紹小書(shū)和組件參數(shù)驗(yàn)證。 React.js 小書(shū) Lesson23 - dangerouslySetHTML 和 style 屬性 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson23 轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者...
摘要：接下來(lái)是實(shí)戰(zhàn)環(huán)節(jié)，我們會(huì)繼續(xù)上一階段的例子，把評(píng)論功能做得更加復(fù)雜一點(diǎn)。把已經(jīng)發(fā)布的評(píng)論持久化，存放到瀏覽器的中。評(píng)論顯示發(fā)布日期，如秒前，分鐘前，并且會(huì)每隔秒更新發(fā)布日期。事件監(jiān)聽(tīng)方法，。下一節(jié)中我們將介紹小書(shū)實(shí)戰(zhàn)分析評(píng)論功能五。 React.js 小書(shū) Lesson25 - 實(shí)戰(zhàn)分析：評(píng)論功能（四） 本文作者：胡子大哈本文原文：http://huziketang.com/book...
摘要：所以我們給評(píng)論組件加上刪除評(píng)論的功能，這樣就可以刪除不想要的評(píng)論了。輸入這是代碼塊，這是正常內(nèi)容。到目前為止，第二階段的實(shí)戰(zhàn)已經(jīng)全部完成，你可以在這里找到完整的代碼。下一節(jié)中我們將介紹小書(shū)高階組件。 React.js 小書(shū) Lesson27 - 實(shí)戰(zhàn)分析：評(píng)論功能（六） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson27 ...
摘要：修改請(qǐng)輸入用戶(hù)名請(qǐng)輸入評(píng)論內(nèi)容我們?cè)黾恿撕头謩e用于加載和保存評(píng)論列表數(shù)據(jù)?，F(xiàn)在發(fā)布評(píng)論，然后刷新可以看到我們的評(píng)論并不會(huì)像以前一樣消失。非常的不錯(cuò)，持久化評(píng)論的功能也完成了。下一節(jié)中我們將介紹小書(shū)實(shí)戰(zhàn)分析評(píng)論功能六。 React.js 小書(shū) Lesson26 - 實(shí)戰(zhàn)分析：評(píng)論功能（五） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/...
閱讀 2553·2021-10-09 09:44
閱讀 648·2019-08-30 15:44
閱讀 3007·2019-08-29 18:46
閱讀 1144·2019-08-29 18:38
閱讀 566·2019-08-26 10:44
閱讀 2443·2019-08-23 16:07
閱讀 1102·2019-08-23 15:38
閱讀 4130·2019-08-23 14:02
