反應，避免突變 state 的原因

Question

我知道變異 state 可以對抗PureComponent （或類似的）還有其他不變異 state 的理由嗎？

我想知道第三種方法可以嗎？

 // The Right Way: // copy the existing items and add a new one addItemImmutably = () => { this.setState({ items: [...this.state.items, this.makeItem()] }); }; // The Wrong Way: // mutate items and set it back addItemMutably = () => { this.state.items.push(this.makeItem()); this.setState({ items: this.state.items }); }; // is this ok? (mutate but set state with new copy) addItem3rdWay = () => { this.state.items.push(this.makeItem()); this.setState({items: [...this.state.items]}); }

Answer 1

您可以將state視為您的數據庫。

您不直接改變數據庫，而是通過API修改數據庫。

setState是API 。

當然，你可以直接修改你的數據庫，但是其他組件將很難檢索這些數據，因為現在這些數據不一致，因為有人沒有使用框架為你提供的API 。

如果你真的喜歡變異 state 的方式，你可以使用Vue ，Vue 就是這樣設計的。

Answer 2

這是一個示例：您已經觸發了一個異步方法，該方法使用您當前的 state 數據發送請求。 與此同時，您執行了一個 function 突變 state。 這將導致異步 function 發送突變的 state，盡管它打算在突變之前發送 state。