极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# React 在 setState 时发生了什么

Issue

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

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

例如下面代码 `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

val: { this.state.val }
} }

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

val: { this.state.val }
}` 第一个 app 是 12 第二个是 00 1 验证了我上面说的

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

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

@hqylss111 口误了,其实是都会批量渲染,可以看看我的示例: https://codesandbox.io/s/react18-state-pilianggengxin-75ktu

Last Updated: 11/27/2021, 10:11:48 AM