React 进阶面试题, React 中多个 setState 调用的原理是什么?
React 进阶面试题, React 中多个 setState 调用的原理是什么?
QA
Step 1
Q:: React 中多个 setState 调用的原理是什么？
A:: 在 React 中，setState 是异步的，当在一个事件处理函数中多次调用 setState 时，React 会将这些调用合并为一次更新。这是因为 React 会对事件处理中的多个 setState 调用进行批处理，以提高性能。React 内部会维护一个更新队列，当事件处理结束后，React 会根据合并后的状态更新组件。
Step 2
Q:: 为什么 setState 是异步的？
A:: setState 的异步特性是为了优化性能。React 在更新组件时，会尽量减少重渲染的次数，因此它会将多次 setState 调用合并处理。在事件处理函数中，多次调用 setState 并不会立即触发重渲染，而是在所有更新都合并之后再进行一次渲染。这样可以避免多次渲染带来的性能问题。
Step 3
Q:: 如何强制同步更新 state？
A:: 在某些情况下，你可能需要在 setState 之后立即获取最新的 state。此时可以使用 setState 的回调函数，或者使用 async/await 搭配 useState 的 setter 函数。通过在 setState 完成后执行代码，确保获得最新的 state 值。例如：this.setState({ count: this.state.count + 1 }, () => console.log(this.state.count));
Step 4
Q:: React 什么时候会触发重渲染？
A:: React 会在 state 或 props 发生变化时触发组件的重渲染。此外，父组件的重渲染也可能导致子组件的重渲染。React 通过比较新旧 state 和 props 来决定是否需要更新组件的 UI，从而优化渲染性能。