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ì)象

1. setState()并不會(huì)立即觸發(fā) state 的更新。

//this.state.demo = 1;
handleClick = () => {
    this.setState({demo: 2});
    console.log(this.state.demo);//  1
}

2. ??注意：在 addEventListener、setTimeout、ajax 回調(diào)中 this.setState 是立即觸發(fā)的。
3. 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 };
});

該語(yǔ)法和直接為 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()