React 基础面试题, React 的 state 和 setState 有什么区别?
React 基础面试题, React 的 state 和 setState 有什么区别?
QA
Step 1
Q:: React 的 state 和 setState 有什么区别？
A:: 在 React 中，state 是一个组件的内部状态，用于存储和管理数据。setState 是一个函数，用于更新组件的 state。当调用 setState 时，React 会触发重新渲染，并在更新 DOM 前合并新的 state 值。需要注意的是，setState 是异步的，它会将多次 state 更新合并为一个批次处理，优化性能。
Step 2
Q:: setState 是同步还是异步的？为什么？
A:: setState 是异步的，这是为了优化性能。在 React 中，出于性能考虑，React 会将多次 state 更新合并为一个批次，这样可以减少不必要的渲染。因为它是异步的，所以在调用 setState 后立即访问 state，可能不会得到更新后的值。
Step 3
Q:: 如何使用 setState 更新 state 中的对象或数组？
A:: 当你需要更新 state 中的对象或数组时，你应该确保不直接修改原始对象或数组，而是创建其副本并更新副本，然后将副本传递给 setState。例如，对象可以使用 Object.assign 或展开运算符，数组可以使用 Array.prototype.map 或展开运算符。
Step 4
Q:: 为什么直接修改 state 而不是使用 setState 会导致问题？
A:: 直接修改 state 会绕过 React 的状态管理流程，React 无法检测到状态的变化，因此不会触发组件的重新渲染。这可能导致 UI 显示不正确或其他难以调试的问题。使用 setState 确保 React 正确处理状态变化并更新组件。
Step 5
Q:: setState 的回调函数有什么作用？
A:: setState 的第二个参数是一个回调函数，它会在状态更新完成并且组件重新渲染后执行。这对于需要在状态更新后立即执行某些操作的场景非常有用，例如在状态更新后获取更新后的 DOM 节点或执行 API 调用。