React.js 小書(shū) Lesson10 - 組件的 state 和 setState
轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
state
我們前面提到過(guò)茄菊，一個(gè)組件的顯示形態(tài)是可以由它數(shù)據(jù)狀態(tài)和配置參數(shù)決定的疯潭。一個(gè)組件可以擁有自己的狀態(tài)，就像一個(gè)點(diǎn)贊按鈕面殖，可以有“已點(diǎn)贊”和“未點(diǎn)贊”狀態(tài)竖哩，并且可以在這兩種狀態(tài)之間進(jìn)行切換。React.js 的 state 就是用來(lái)存儲(chǔ)這種可變化的狀態(tài)的脊僚。
[圖片上傳失敗...(image-9c2e52-1510226132684)]
我們還是拿點(diǎn)贊按鈕做例子相叁，它具有已點(diǎn)贊和未點(diǎn)贊兩種狀態(tài)遵绰。那么就可以把這個(gè)狀態(tài)存儲(chǔ)在 state 中。修改 src/index.js 為：
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class LikeButton extends Component {
constructor () {
super()
this.state = { isLiked: false }
}
handleClickOnLikeButton () {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
return (
<button onClick={this.handleClickOnLikeButton.bind(this)}>
{this.state.isLiked ? '取消' : '點(diǎn)贊'} ??
</button>
)
}
}
...
isLiked 存放在實(shí)例的 state 對(duì)象當(dāng)中增淹，這個(gè)對(duì)象在構(gòu)造函數(shù)里面初始化椿访。這個(gè)組件的 render 函數(shù)內(nèi)，會(huì)根據(jù)組件的 state 的中的isLiked不同顯示“取消”或“點(diǎn)贊”內(nèi)容虑润。并且給 button 加上了點(diǎn)擊的事件監(jiān)聽(tīng)成玫。
最后構(gòu)建一個(gè) Index ，在它的 render 函數(shù)內(nèi)使用 LikeButton 拳喻。然后把 Index 渲染到頁(yè)面上：
...
class Index extends Component {
render () {
return (
<div>
<LikeButton />
</div>
)
}
}
ReactDOM.render(
<Index />,
document.getElementById('root')
)
setState 接受對(duì)象參數(shù)
在 handleClickOnLikeButton 事件監(jiān)聽(tīng)函數(shù)里面哭当，大家可以留意到，我們調(diào)用了 setState 函數(shù)冗澈，每次點(diǎn)擊都會(huì)更新 isLiked 屬性為 !isLiked钦勘，這樣就可以做到點(diǎn)贊和取消功能。
setState 方法由父類 Component 所提供亚亲。當(dāng)我們調(diào)用這個(gè)函數(shù)的時(shí)候个盆，React.js 會(huì)更新組件的狀態(tài) state ，并且重新調(diào)用 render 方法朵栖，然后再把 render 方法所渲染的最新的內(nèi)容顯示到頁(yè)面上。
注意柴梆，當(dāng)我們要改變組件的狀態(tài)的時(shí)候陨溅，不能直接用 this.state = xxx 這種方式來(lái)修改，如果這樣做 React.js 就沒(méi)辦法知道你修改了組件的狀態(tài)绍在，它也就沒(méi)有辦法更新頁(yè)面门扇。所以，一定要使用 React.js 提供的 setState 方法偿渡，它接受一個(gè)對(duì)象或者函數(shù)作為參數(shù)臼寄。
傳入一個(gè)對(duì)象的時(shí)候吉拳，這個(gè)對(duì)象表示該組件的新?tīng)顟B(tài)适揉。但你只需要傳入需要更新的部分就可以了，而不需要傳入整個(gè)對(duì)象嫉嘀。例如，假設(shè)現(xiàn)在我們有另外一個(gè)狀態(tài) name ：
...
constructor (props) {
super(props)
this.state = {
name: 'Tomy',
isLiked: false
}
}
handleClickOnLikeButton () {
this.setState({
isLiked: !this.state.isLiked
})
}
...
因?yàn)辄c(diǎn)擊的時(shí)候我們并不需要修改 name拭宁，所以只需要傳入 isLiked 就行了。Tomy 還是那個(gè) Tomy杰标，而 isLiked 已經(jīng)不是那個(gè) isLiked 了。
setState 接受函數(shù)參數(shù)
這里還有要注意的是摇零，當(dāng)你調(diào)用 setState 的時(shí)候桶蝎，React.js 并不會(huì)馬上修改 state。而是把這個(gè)對(duì)象放到一個(gè)更新隊(duì)列里面登渣，稍后才會(huì)從隊(duì)列當(dāng)中把新的狀態(tài)提取出來(lái)合并到 state 當(dāng)中，然后再觸發(fā)組件更新粘优。這一點(diǎn)要好好注意呻顽。可以體會(huì)一下下面的代碼：
...
handleClickOnLikeButton () {
console.log(this.state.isLiked)
this.setState({
isLiked: !this.state.isLiked
})
console.log(this.state.isLiked)
}
...
你會(huì)發(fā)現(xiàn)兩次打印的都是 false嬉愧，即使我們中間已經(jīng) setState 過(guò)一次了喉前。這并不是什么 bug，只是 React.js 的 setState 把你的傳進(jìn)來(lái)的狀態(tài)緩存起來(lái)卵迂，稍后才會(huì)幫你更新到 state 上裕便，所以你獲取到的還是原來(lái)的 isLiked偿衰。
所以如果你想在 setState 之后使用新的 state 來(lái)做后續(xù)運(yùn)算就做不到了改览，例如：
...
handleClickOnLikeButton () {
this.setState({ count: 0 }) // => this.state.count 還是 undefined
this.setState({ count: this.state.count + 1}) // => undefined + 1 = NaN
this.setState({ count: this.state.count + 2}) // => NaN + 2 = NaN
}
...
上面的代碼的運(yùn)行結(jié)果并不能達(dá)到我們的預(yù)期，我們希望 count 運(yùn)行結(jié)果是 3 漏设，可是最后得到的是 NaN今妄。但是這種后續(xù)操作依賴前一個(gè) setState 的結(jié)果的情況并不罕見(jiàn)鸳碧。
這里就自然地引出了 setState 的第二種使用方式瞻离，可以接受一個(gè)函數(shù)作為參數(shù)。React.js 會(huì)把上一個(gè) setState 的結(jié)果傳入這個(gè)函數(shù)套利，你就可以使用該結(jié)果進(jìn)行運(yùn)算鹤耍、操作，然后返回一個(gè)對(duì)象作為更新 state 的對(duì)象：
...
handleClickOnLikeButton () {
this.setState((prevState) => {
return { count: 0 }
})
this.setState((prevState) => {
return { count: prevState.count + 1 } // 上一個(gè) setState 的返回是 count 為 0喊衫，當(dāng)前返回 1
})
this.setState((prevState) => {
return { count: prevState.count + 2 } // 上一個(gè) setState 的返回是 count 為 1杆怕，當(dāng)前返回 3
})
// 最后的結(jié)果是 this.state.count 為 3
}
...
這樣就可以達(dá)到上述的利用上一次 setState 結(jié)果進(jìn)行運(yùn)算的效果。
setState 合并
上面我們進(jìn)行了三次 setState寝杖，但是實(shí)際上組件只會(huì)重新渲染一次，而不是三次瑟幕；這是因?yàn)樵?React.js 內(nèi)部會(huì)把 JavaScript 事件循環(huán)中的消息隊(duì)列的同一個(gè)消息中的 setState 都進(jìn)行合并以后再重新渲染組件伟姐。
深層的原理并不需要過(guò)多糾結(jié)愤兵，你只需要記住的是：在使用 React.js 的時(shí)候排吴，并不需要擔(dān)心多次進(jìn)行 setState 會(huì)帶來(lái)性能問(wèn)題。
下一節(jié)中我們將介紹《React.js 小書(shū) Lesson11 - 配置組件的 props》钻哩。
