【React】setState 是怎么记住上一个状态值的？
在 React 中，setState 通过 React 内部的状态管理机制来记住上一个状态值。即使每次组件重新渲染时，函数组件会被重新执行，React 仍能通过其内部的状态管理系统保持和追踪组件的状态变化。下面详细解释其工作原理：
1. setState 的工作原理
setState 是 React 的核心状态更新方法，用于更新组件的状态，并且触发重新渲染。React 中，组件的状态存储在组件实例中（类组件）或通过 React 的 Hook 系统（函数组件）进行管理。在调用 setState 时，React 并不会立即更新状态，而是将更新请求放入一个队列中，并批量处理这些更新，以提高性能。
在函数组件中，useState 是一个用于管理状态的 Hook。每次调用 setState 时，React 将使用更新队列，并在合适的时机将最新的状态重新传递给组件，确保每次渲染时都能够记住最新的状态。
2. 函数组件的状态记忆（useState）
函数组件本质上是无状态的，函数内部的局部变量在每次渲染后都会被销毁。然而，React 通过 useState Hook 来保持状态的持久化，它会将状态与组件进行关联，即使组件重新渲染，React 仍然能够保持状态。
function MyComponent() {
const [count, setCount] = useState(0); // 初始化状态为 0
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}
在这个例子中，useState(0) 初始化了 count 为 0，setCount 是用于更新 count 值的函数。每次点击按钮时，setCount 会更新 count 的值，并触发组件重新渲染。
工作机制：
- 首次渲染：当组件第一次渲染时，React 会初始化状态并将初始值（如
0）存储在内部的状态列表中。 - 后续渲染：每次组件重新渲染时，React 不会重新初始化状态，而是从其内部存储中取出最新的状态值，并将其传递给组件函数中的
useState。 - 状态更新：当
setState（如setCount）被调用时，React 将更新的状态值存入其内部的状态存储，并在下一次渲染时使用该值。通过这种方式，React 能够记住并管理状态值。
3. React 如何记住状态（闭包和 Hook 内部机制）
React 通过闭包和 Hooks 系统来管理状态，确保在多次渲染之间保持状态的一致性。useState 背后的工作方式是，React 为每个组件实例维护了一个“状态钩子”链表，组件每次渲染时，它依次从这个链表中获取对应的状态值。
流程概述：
- 状态存储：每个组件的状态被存储在 React 内部的某个数据结构中，通常是一个状态列表。
- 状态链表：每个调用
useState的组件，都有一个状态链表，其中存储了状态值和setState函数。 - 状态更新：当调用
setState时，React 会更新链表中的状态值，然后调度一次渲染。 - 下一次渲染时：在下一次渲染时，React 从该链表中获取最新的状态值，确保状态是连续且正确的。
使用 setState 更新状态：
const [count, setCount] = useState(0);
function handleClick() {
setCount(prevCount => prevCount + 1);
}
这里 setCount 可以接收一个函数，该函数的参数 prevCount 是 React 自动传入的上一次的状态值。即使多个 setState 在同一渲染周期中执行，React 也会确保传递的状态值是最新的。
4. React 的批量更新机制
React 在同一个事件或生命周期方法中会对多个状态更新进行批量处理。即使多次调用 setState，React 也不会立即更新状态，而是等到事件处理完后再进行批量更新，并触发一次渲染。
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
setCount(count + 1);
}
在这种情况下，虽然两次调用 setCount，React 会批量更新，并只会触发一次渲染，最终 count 只会增加一次。
总结
- 状态持久化：React 通过
useState和内部状态存储系统来管理状态，每次渲染时，React 会从状态链表中获取最新状态，并保持状态的连续性。 - 闭包与 Hooks：React 的 Hooks 系统和闭包机制确保状态不会在多次渲染中丢失，
setState会更新状态链表，并在下一次渲染时应用最新状态。 - 批量处理：React 对
setState调用进行了优化，多个setState会被批量处理，从而避免不必要的多次渲染。