React setState 后立刻获取 state 还没有更新？ setState 执行原理?

setState 后立刻获取 state 还没有更新？

在React中，调用setState方法后并不能立刻获取更新后的 state 值，因为setState是一个异步操作。React会将state的更新放在一个队列中，然后在适当的时机批量处理这些更新，从而提高性能。

如果需要在setState后立刻获取最新的state值，可以在setState方法的第二个参数中传入一个回调函数，在这个回调函数中获取最新的state值。这个回调函数会在state更新完毕且组件重新渲染之后被调用。

jsx this.setState({ count: this.state.count + 1 }, () => { 
    console.log(this.state.count); // 在setState后立刻获取更新后的state值 
});

通过在setState的回调函数中获取state值，可以确保在state更新完成后再处理后续逻辑，以及确保获取到最新的state值。

setState 执行原理

1. 首先，setState方法会将传入的状态更新对象合并到组件的状态中。React会将更新后的状态放入一个队列中，而不是立即应用到组件实例中。
2. React会对状态更新进行批量处理，在连续调用多次setState时，React会将这些更新合并成一个更新批次，在适当的时机进行状态更新。
3. 在状态更新批处理过程中，React会对组件进行重新渲染，比较更新前后的虚拟DOM树，只更新需要更新的部分，而不是重新渲染整个组件。
4. 在更新完成后，React会调用组件的render方法重新渲染组件，并将更新完成后的虚拟DOM树渲染到页面上。
5. 如果在setState方法中传入了回调函数，该回调函数会在状态更新完成且组件重新渲染之后被调用。

总的来说，setState方法实际上是异步的，其执行原理是将状态更新放入更新队列中，并经过状态更新、批处理和虚拟DOM渲染等过程，最终实现组件状态的更新和重新渲染。