React.js 小書(shū) Lesson12 - state vs props
轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
我們來(lái)一個(gè)關(guān)于 state 和 props 的總結(jié)。
state 的主要作用是用于組件保存、控制、修改自己的可變狀態(tài)。state 在組件內(nèi)部初始化，可以被組件自身修改，而外部不能訪問(wèn)也不能修改。你可以認(rèn)為 state 是一個(gè)局部的、只能被組件自身控制的數(shù)據(jù)源。state 中狀態(tài)可以通過(guò) this.setState 方法進(jìn)行更新，setState 會(huì)導(dǎo)致組件的重新渲染。
props 的主要作用是讓使用該組件的父組件可以傳入?yún)?shù)來(lái)配置該組件。它是外部傳進(jìn)來(lái)的配置參數(shù)，組件內(nèi)部無(wú)法控制也無(wú)法修改。除非外部組件主動(dòng)傳入新的 props，否則組件的 props 永遠(yuǎn)保持不變。
state 和 props 有著千絲萬(wàn)縷的關(guān)系。它們都可以決定組件的行為和顯示形態(tài)。一個(gè)組件的 state 中的數(shù)據(jù)可以通過(guò) props 傳給子組件，一個(gè)組件可以使用外部傳入的 props 來(lái)初始化自己的 state。但是它們的職責(zé)其實(shí)非常明晰分明：state 是讓組件控制自己的狀態(tài)，props 是讓外部對(duì)組件自己進(jìn)行配置。
如果你覺(jué)得還是搞不清 state 和 props 的使用場(chǎng)景，那么請(qǐng)記住一個(gè)簡(jiǎn)單的規(guī)則：盡量少地用 state，盡量多地用 props。
沒(méi)有 state 的組件叫無(wú)狀態(tài)組件（stateless component），設(shè)置了 state 的叫做有狀態(tài)組件（stateful component）。因?yàn)闋顟B(tài)會(huì)帶來(lái)管理的復(fù)雜性，我們盡量多地寫(xiě)無(wú)狀態(tài)組件，盡量少地寫(xiě)有狀態(tài)的組件。這樣會(huì)降低代碼維護(hù)的難度，也會(huì)在一定程度上增強(qiáng)組件的可復(fù)用性。前端應(yīng)用狀態(tài)管理是一個(gè)復(fù)雜的問(wèn)題，我們后續(xù)會(huì)繼續(xù)討論。
React.js 非常鼓勵(lì)無(wú)狀態(tài)組件，在 0.14 版本引入了函數(shù)式組件——一種定義不能使用 state 組件，例如一個(gè)原來(lái)這樣寫(xiě)的組件：
class HelloWorld extends Component {
constructor() {
super()
}
sayHi () {
alert('Hello World')
}
render () {
return (
<div onClick={this.sayHi.bind(this)}>Hello World</div>
)
}
}
用函數(shù)式組件的編寫(xiě)方式就是：
const HelloWorld = (props) => {
const sayHi = (event) => alert('Hello World')
return (
<div onClick={sayHi}>Hello World</div>
)
}
以前一個(gè)組件是通過(guò)繼承 Component 來(lái)構(gòu)建，一個(gè)子類(lèi)就是一個(gè)組件。而用函數(shù)式的組件編寫(xiě)方式是一個(gè)函數(shù)就是一個(gè)組件，你可以和以前一樣通過(guò) <HellWorld /> 使用該組件。不同的是，函數(shù)式組件只能接受 props 而無(wú)法像跟類(lèi)組件一樣可以在 constructor 里面初始化 state。你可以理解函數(shù)式組件就是一種只能接受 props 和提供 render 方法的類(lèi)組件。
但本書(shū)全書(shū)不采用這種函數(shù)式的方式來(lái)編寫(xiě)組件，統(tǒng)一通過(guò)繼承 Component 來(lái)構(gòu)建組件。
下一節(jié)中我們將介紹《React.js 小書(shū) Lesson13 - 渲染列表數(shù)據(jù)》。
