react 是單向數(shù)據(jù)流撇贺，若想要改變已有組件的外觀，我們只能通過更改組件的 props 或者更新組件的 state。在 react 項(xiàng)目的代碼中我們操作最多的就是 this.setState 方法。下面對(duì) setState 方法進(jìn)行詳細(xì)的說明。
setState要點(diǎn)：react 框架為了提高性能尽楔，會(huì)對(duì) state 的更新進(jìn)行收集、合并第练、再進(jìn)行一次批量的狀態(tài)更新阔馋。這種機(jī)制常常導(dǎo)致一些意想不到的情況。
setState 有兩種調(diào)用形式：
向 setState 傳遞對(duì)象
- setState()并不會(huì)立即觸發(fā) state 的更新娇掏。
//this.state.demo = 1;
handleClick = () => {
this.setState({demo: 2});
console.log(this.state.demo);// 1
}
- ??注意：在 addEventListener呕寝、setTimeout、ajax 回調(diào)中 this.setState 是立即觸發(fā)的婴梧。
- setState 會(huì)合并更新下梢，可能會(huì)造成狀態(tài)更新的丟失
handleClick = () => {
this.setState({demo: this.state.demo + 1});
this.setState({demo: this.state.demo + 1});
}
//click 之后 demo 為2而不是3
綜上：在同一代碼塊中不要多次調(diào)用 this.setState 方法
react 的 setState 還提供了另一種調(diào)用形式： this.setState(callbackFunc)
this.setState((previousState, currentProps) => {
return { ...previousState, foo: currentProps.bar };
});
該語法和直接為 setState 傳遞對(duì)象不同,不會(huì)合并更新。
// demo + 1
handleSyncStateChange = () => {
this.setState({
demo: this.state.demo + 1
});
this.setState({
demo: this.state.demo + 1
});
}
// demo + 2
handleAsyncStateChange = () => {
this.setState((preState, preProps) => {
return {
demo: preState.demo + 1
}
});
this.setState((preState, preProps) => {
return {
demo: preState.demo + 1
}
});
}
refs
Beware: React setState is asynchronous!
Async Nature Of setState()
