React 在 setState 时发生了什么

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 383 (opens in a new tab)

Author 回答者: hqylss111 (opens in a new tab)

react16 1.setstae 以后会把update队列加入到mount 里面 如果他在生命周期里面 其实他是进行批量去更新的 如果他是在生命周期里面去set 其实数据同步的。如果想要拿到最新的就需要脱离react生命周期，和react事件流 比如在setTimeout里面set值 他拿到的数据就是最新的。

Author 回答者: hqylss111 (opens in a new tab)

例如下面代码 `class App extends React.Component { state = { val: 0 } componentDidMount() { setTimeout(() => { // 第一次调用 this.setState({ val: this.state.val + 1 }); console.log('first setState', this.state);

  // 第二次调用
  this.setState({ val: this.state.val + 1 });
  console.log('second setState', this.state);
});

} render() { return

class App extends React.Component { state = { val: 0 } componentDidMount() { // 第一次调用 this.setState({ val: this.state.val + 1 }); console.log('first setState', this.state);

 // 第二次调用
 this.setState({ val: this.state.val + 1 });
 console.log('second setState', this.state);

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

} render() { return

Author 回答者: shfshanyue (opens in a new tab)

1. 当每次 setState 时，组件会重新渲染
2. 当在函数式组件中 setState 时，如果两次设置的 state 相同时，组件将不会重新渲染
3. 当在事件处理函数中，多次调用 setState，React 将会批量进行渲染
4. 当在事件处理函数外，多次调用 setState，React 将不会重新渲染
5. 在 React18 之后，同一函数多次调用 setState，React 都将会批量进行渲染

Author 回答者: hqylss111 (opens in a new tab)

在 React18 之后，同一函数多次调用 setState，React 都将会重新渲染 为什么会这样修改那？ 目的是什么那？ 批量修改不是性能更好嘛？

Author 回答者: shfshanyue (opens in a new tab)

@hqylss111 口误了，其实是都会批量渲染，可以看看我的示例: https://codesandbox.io/s/react18-state-pilianggengxin-75ktu (opens in a new tab)