組件狀態(tài)是什么？
大多數(shù)組件只擁有屬性和可渲染性熬尺。然而，它還可以提供狀態(tài)這個(gè)特性谓罗，狀態(tài)被用來(lái)存儲(chǔ)組件在某段時(shí)間內(nèi)狀態(tài)改變的信息粱哼。用戶事件或系統(tǒng)事件會(huì)導(dǎo)致一些典型的狀態(tài)改變。（比如檩咱，對(duì)用戶輸入的回應(yīng)揭措，服務(wù)器的請(qǐng)求， 生命周期函數(shù)）.
React 文檔是這樣解釋 state 的：
組件事件處理中用到的數(shù)據(jù)發(fā)生改變時(shí)會(huì)觸發(fā) UI 更新刻蚯。在現(xiàn)實(shí)的 app 中绊含，這個(gè)數(shù)據(jù)趨向于很小，并且被 JSON 化芦倒。構(gòu)建一個(gè)有狀態(tài)的組件的時(shí)候艺挪，要想辦法用最少的屬性來(lái)代表這個(gè)狀態(tài)的可能性，然后把這些屬性存儲(chǔ)在 this.state
中兵扬。你會(huì)發(fā)現(xiàn)以這種方式考慮而書(shū)寫(xiě)出來(lái)的 app 將是一個(gè)最正確的 app麻裳，因?yàn)榻o state 添加過(guò)多的數(shù)據(jù)或已計(jì)算出的數(shù)據(jù)意味著你需要明確地保持 UI 狀態(tài)和這些數(shù)據(jù)同步，而不是依賴 React 計(jì)算給你（也就是不能充分利用 React 的 state 機(jī)制了）器钟。

關(guān)于 React 組件的 state津坑，你需要記住以下幾點(diǎn)：
1、如果一個(gè)組件有狀態(tài)傲霸，那么它的默認(rèn)狀態(tài)是通過(guò) getInitialState()
來(lái)提供的疆瑰；
2、狀態(tài)改變指得就是你會(huì)如何開(kāi)啟一個(gè)組件和它的子子孫孫組件的重渲染昙啄；
3穆役、可以通過(guò) this.setState()
去設(shè)置一個(gè)新 state 來(lái)告知組件 state 的改變；
4梳凛、狀態(tài)改變會(huì)將新數(shù)據(jù)和該 state 里原來(lái)保存的老數(shù)據(jù)合并在一起耿币；
5、狀態(tài)改變時(shí)組件內(nèi)部會(huì)進(jìn)行重新渲染韧拒。不需要你再次調(diào)用 this.render()
;
6淹接、state 對(duì)象只存儲(chǔ)渲染 UI 需要的最少的數(shù)據(jù)十性。不要往 state 對(duì)象里放已計(jì)算的數(shù)據(jù)，別的 React 組件塑悼，或者 props.
State 如何進(jìn)行工作
組件 state 工作是這樣的：先給組件設(shè)置一個(gè)默認(rèn)狀態(tài)劲适，再獲取當(dāng)前狀態(tài)，最后更新這個(gè)狀態(tài)厢蒜。
在下面的代碼示例中霞势，我創(chuàng)建了一個(gè)組件 <MoodComponent />
，它示范了 getInitialState
斑鸦，this.state.[STATE]
和 this.setState()
是如何使用的支示。如果你在瀏覽器上點(diǎn)擊這個(gè)組件，它會(huì)在提供的這些狀態(tài)中循環(huán)鄙才。從代碼中可以看出，這個(gè)組件有 3 個(gè)潛在狀態(tài)和 UI 綁定在一起促绵，至于呈現(xiàn)哪一種狀態(tài)則取決于用戶的點(diǎn)擊攒庵。
var MoodComponent = React.createClass({ getInitialState: function() { return {mood: ':|'}; }, changeMood:function(event,a){ const moods = [':)',':|',':(']; const current = moods.indexOf(event.target.textContent); this.setState({mood: current === 2 ? moods[0] : moods[current+1]}); }, render: function() { return ( <span style={{fontSize:'60',border:'1px solid #333',cursor:'pointer'}} onClick={this.changeMood}> {this.state.mood} </span> ) }});ReactDOM.render(< MoodComponent / >, app);
可以看到 <MoodComponent />
有一個(gè)初始狀態(tài) ‘:|' ，它是通過(guò) getInitialState: function() {return {mood: ‘:|'};}
設(shè)置的败晴，組件第一次渲染的時(shí)候浓冒， {this.state.mood}
寫(xiě)的就是它。
為了改變 state尖坤，添加了一個(gè)事件監(jiān)聽(tīng)稳懒；在這個(gè)示例中，<span>
節(jié)點(diǎn)添加了點(diǎn)擊事件（onClick
）慢味，它會(huì)調(diào)用 changeMood
函數(shù)场梆。在這個(gè)函數(shù)里，我基于當(dāng)前的 mood/state 纯路，使用 this.setState()
去循環(huán)出下一個(gè) mood或油。在 state 更新后，組件自己會(huì)進(jìn)行重新渲染驰唬， UI 發(fā)生改變顶岸。
State vs. Props
state
和 props
的共同之處：
1、都是簡(jiǎn)單的 JS 對(duì)象叫编；
2辖佣、都有默認(rèn)值；
3搓逾、都能通過(guò) this.props
或 this.state
來(lái)讀取卷谈，而且都不能用這種方式來(lái)設(shè)置值；使用 this.
時(shí)恃逻，它們都是只讀的雏搂。
不同之處：
Props:
1藕施、Props 是由它的祖上傳到當(dāng)前組件中的，祖上或者是父母凸郑，也可能是 React 最初渲染時(shí)的初始域裳食；
2、Props 作為配置值傳給組件芙沥。類似把參數(shù)傳給函數(shù)诲祸；
3、組件接收的時(shí)候而昨， Props 是不可變的救氯。也就是說(shuō)，在組件內(nèi)部歌憨，不能改變傳遞給組件的 Props着憨。
State:
1、State 是和 UI 綁定的某一時(shí)間點(diǎn)上的序列化數(shù)據(jù)代表务嫡；
2甲抖、State 都是從默認(rèn)值開(kāi)始，然后通過(guò)使用 setState()
進(jìn)行內(nèi)部改變心铃；
3准谚、State 只能被含有狀態(tài)特性的組件修改。從這點(diǎn)上來(lái)看它是私有的去扣；
4柱衔、不能更改子組件的狀態(tài)。組件永遠(yuǎn)不會(huì)共享可變的狀態(tài)愉棱；
5唆铐、State 只包含代表 UI 狀態(tài)的最少量的數(shù)據(jù)。不包含已計(jì)算的數(shù)據(jù)羽氮，其他的 React 組件和從 props 復(fù)制來(lái)的數(shù)據(jù)或链；
6、如果可能的話档押，盡量避免使用 State 澳盐。無(wú)狀態(tài)組件是理想化的，有狀態(tài)組件增加了復(fù)雜度令宿。React 文檔這樣建議：創(chuàng)建無(wú)狀態(tài)組件的一般模式只是渲染數(shù)據(jù)叼耙，有狀態(tài)組件高于它一個(gè)層級(jí)，通過(guò) props 傳遞狀態(tài)給它的子組件粒没。有狀態(tài)組件壓縮了所有的交互邏輯筛婉，而無(wú)狀態(tài)組件以一種聲明方式來(lái)關(guān)注渲染的數(shù)據(jù)。
創(chuàng)建有狀態(tài)函數(shù)組件
當(dāng)一個(gè)組件只有孤單的 props
，沒(méi)有 state
時(shí)爽撒，組件可以被寫(xiě)成純函數(shù)入蛆，從而避免了創(chuàng)建組件實(shí)例的需要。在下面代碼示例中硕勿，MyComponent
是一個(gè)函數(shù)哨毁，返回從 React.createElement()
得到的結(jié)果。

不用 JSX 的話源武，上面的代碼會(huì)是這個(gè)樣子：
var MyComponent = function MyComponent(props) { return React.createElement( "div", null, "Hello ", props.name );};ReactDOM.render(React.createElement(MyComponent, { name: "doug" }), app);

構(gòu)建一個(gè)沒(méi)有調(diào)用 React.createClass()
的 React 組件被稱為無(wú)狀態(tài)函數(shù)組件扼褪。
無(wú)狀態(tài)函數(shù)組件不能被傳遞組件選項(xiàng)（render
, componentWillUnmount
等等）。然而粱栖，.propTypes
和 .defaultProps
在函數(shù)中可以被作為屬性設(shè)置话浇。
下面代碼示范了如何在無(wú)狀態(tài)函數(shù)組件中設(shè)置 .propTypes
和 .defaultProps
：

本節(jié)筆記
制作組件時(shí)，盡最大可能將你的組件制作成無(wú)狀態(tài)的闹究。