React为什么不要直接修改state?如果想修改怎么做?

74 阅读1分钟

"React不建议直接修改state,而是通过setState方法来更新state。直接修改state可能会导致不可预测的结果,因为React可能会批量处理state更新,直接修改可能会造成数据不同步。要修改state,应该使用setState方法,并传入新的state值,React会在合适的时机更新组件。 setState方法有两种形式:第一种形式接受一个对象作为参数,用于更新部分state:

this.setState({ count: this.state.count + 1 });

第二种形式接受一个函数作为参数,函数接收前一个state作为参数,适用于在更新state时需要基于当前state计算的情况:

this.setState((prevState) => ({
  count: prevState.count + 1
}));

如果需要基于当前state更新state,应该使用第二种形式,以避免因为异步操作导致数据不同步的问题。另外,setState方法还接受第二个参数,即更新state完成后的回调函数:

this.setState({ count: this.state.count + 1 }, () => {
  console.log('State updated');
});

通过这种方式,在确保state更新完成后执行一些操作。总之,要遵循React的数据流原则,不直接修改state,而是通过setState方法来更新state,以确保组件状态的正确性和可维护性。"