資訊專欄INFORMATION COLUMN
摘要：的主要作用是用于組件保存控制修改自己的可變狀態(tài)。它們都可以決定組件的行為和顯示形態(tài)。但是它們的職責(zé)其實(shí)非常明晰分明是讓組件控制自己的狀態(tài)，是讓外部對(duì)組件自己進(jìn)行配置。下一節(jié)中我們將介紹小書渲染列表數(shù)據(jù)。
React.js 小書 Lesson12 - state vs props
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson12
轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
我們來一個(gè)關(guān)于 state 和 props 的總結(jié)。
state 的主要作用是用于組件保存、控制、修改自己的可變狀態(tài)。state 在組件內(nèi)部初始化，可以被組件自身修改，而外部不能訪問也不能修改。你可以認(rèn)為 state 是一個(gè)局部的、只能被組件自身控制的數(shù)據(jù)源。state 中狀態(tài)可以通過 this.setState 方法進(jìn)行更新，setState 會(huì)導(dǎo)致組件的重新渲染。
props 的主要作用是讓使用該組件的父組件可以傳入?yún)?shù)來配置該組件。它是外部傳進(jìn)來的配置參數(shù)，組件內(nèi)部無法控制也無法修改。除非外部組件主動(dòng)傳入新的 props，否則組件的 props 永遠(yuǎn)保持不變。
state 和 props 有著千絲萬縷的關(guān)系。它們都可以決定組件的行為和顯示形態(tài)。一個(gè)組件的 state 中的數(shù)據(jù)可以通過 props 傳給子組件，一個(gè)組件可以使用外部傳入的 props 來初始化自己的 state。但是它們的職責(zé)其實(shí)非常明晰分明：state 是讓組件控制自己的狀態(tài)，props 是讓外部對(duì)組件自己進(jìn)行配置。
如果你覺得還是搞不清 state 和 props 的使用場(chǎng)景，那么請(qǐng)記住一個(gè)簡(jiǎn)單的規(guī)則：盡量少地用 state，盡量多地用 props。
沒有 state 的組件叫無狀態(tài)組件（stateless component），設(shè)置了 state 的叫做有狀態(tài)組件（stateful component）。因?yàn)闋顟B(tài)會(huì)帶來管理的復(fù)雜性，我們盡量多地寫無狀態(tài)組件，盡量少地寫有狀態(tài)的組件。這樣會(huì)降低代碼維護(hù)的難度，也會(huì)在一定程度上增強(qiáng)組件的可復(fù)用性。前端應(yīng)用狀態(tài)管理是一個(gè)復(fù)雜的問題，我們后續(xù)會(huì)繼續(xù)討論。
React.js 非常鼓勵(lì)無狀態(tài)組件，在 0.14 版本引入了函數(shù)式組件——一種定義不能使用 state 組件，例如一個(gè)原來這樣寫的組件：
class HelloWorld extends Component {
constructor() {
super()
}
sayHi () {
alert("Hello World")
}
render () {
return (
Hello World
)
}
}
用函數(shù)式組件的編寫方式就是：
const HelloWorld = (props) => {
const sayHi = (event) => alert("Hello World")
return (
Hello World
)
}
以前一個(gè)組件是通過繼承 Component 來構(gòu)建，一個(gè)子類就是一個(gè)組件。而用函數(shù)式的組件編寫方式是一個(gè)函數(shù)就是一個(gè)組件，你可以和以前一樣通過
但本書全書不采用這種函數(shù)式的方式來編寫組件，統(tǒng)一通過繼承 Component 來構(gòu)建組件。
下一節(jié)中我們將介紹《React.js 小書 Lesson13 - 渲染列表數(shù)據(jù)》。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89662.html
摘要：因?yàn)楣ぷ髦幸恢痹谑褂茫惨恢币詠硐肟偨Y(jié)一下自己關(guān)于的一些知識(shí)經(jīng)驗(yàn)。于是把一些想法慢慢整理書寫下來，做成一本開源免費(fèi)專業(yè)簡(jiǎn)單的入門級(jí)別的小書，提供給社區(qū)。本書的后續(xù)可能會(huì)做成視頻版本，敬請(qǐng)期待。本作品采用署名禁止演繹國(guó)際許可協(xié)議進(jìn)行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...
摘要：默認(rèn)配置上面的組件默認(rèn)配置我們是通過操作符來實(shí)現(xiàn)。但這并不意味著由決定的顯示形態(tài)不能被修改。組件可以在內(nèi)部通過獲取到配置參數(shù)，組件可以根據(jù)的不同來確定自己的顯示形態(tài)，達(dá)到可配置的效果。下一節(jié)中我們將介紹小書。 React.js 小書 Lesson11 - 配置組件的 props 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesso...
摘要：最后抽離出來了一個(gè)類，可以幫助我們更好的做組件化。一個(gè)組件有自己的顯示形態(tài)上面的結(jié)構(gòu)和內(nèi)容行為，組件的顯示形態(tài)和行為可以由數(shù)據(jù)狀態(tài)和配置參數(shù)共同決定。接下來我們開始正式進(jìn)入主題，開始正式介紹。下一節(jié)鏈接直達(dá)小書基本環(huán)境安裝 React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類 本文作者：胡子大哈本文原文：http://huziketang.com/books...
摘要：但是給傳遞的評(píng)論數(shù)據(jù)并沒有傳遞給，所以現(xiàn)在發(fā)表評(píng)論時(shí)沒有反應(yīng)的。包括實(shí)現(xiàn)功能之前先理解分析需求，劃分組件。到此為止，小書的第一階段已經(jīng)結(jié)束，你可以利用這些知識(shí)點(diǎn)來構(gòu)建簡(jiǎn)單的功能模塊了。 React.js 小書 Lesson16 - 實(shí)戰(zhàn)分析：評(píng)論功能（三） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson16 轉(zhuǎn)載請(qǐng)注明出處...
摘要：例如，上面設(shè)置了的為，在中被初始化為空字符串。如何向傳遞的數(shù)據(jù)父組件只需要通過給子組件傳入一個(gè)回調(diào)函數(shù)。當(dāng)用戶點(diǎn)擊發(fā)布按鈕的時(shí)候，調(diào)用中的回調(diào)函數(shù)并且將傳入該函數(shù)即可。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能三。 React.js 小書 Lesson15 - 實(shí)戰(zhàn)分析：評(píng)論功能（二） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/les...
閱讀 803·2021-09-29 09:34
閱讀 2647·2019-08-30 15:53
閱讀 3475·2019-08-29 17:17
閱讀 854·2019-08-29 16:08
閱讀 1241·2019-08-29 13:03
閱讀 1026·2019-08-27 10:54
閱讀 763·2019-08-26 13:39
閱讀 2940·2019-08-26 13:34
