深入理解React State 原理

目录

问题：setState 到底是同步还是异步的？类组件statesetState原理揭秘函数组件state

问题：setState 到底是同步还是异步的？

如果对 React 底层有一定了解，可以回答出 batchUpdate 批量更新概念，以及批量更新被打破的条件。

答案：有时是同步，有时是异步。

在 合成事件 和 生命周期函数 里是 异步 的在 原生事件 和 setTimeout、promise里是 同步 的

造成setState的异步并不是由内部的异步代码引起的，在本身的执行过程中时同步的，但是合成事件和生命周期函数的调用顺序在更新之前，导致在内部不能直接得到更新后的值，可以用第二个参数 callback 来获取。

具体解释：可参考setState的执行过程

类组件state

setState(obj,callback)

第一个参数：当 obj 为一个对象，则为即将合并的 state ；如果 obj 是一个函数，那么当前组件的 state 和 props 将作为参数，返回值用于合并新的 state。第二个参数 callback ：callback 为一个函数，函数执行上下文中可以获取当前 setState 更新后的最新 state 的值，可以作为依赖 state 变化的副作用函数，可以用来做一些基于 DOM 的操作。

一次事件中触发一次如上 setState ，在 React 底层执行过程：

render 阶段 render 函数执行 -> commit 阶段真实 DOM 替换 -> setState 回调函数执行 callback

，Promise 中的 setState

函数组件state

const [ state , dispatch ] = useState(initData)

① state 目的提供给 UI ，作为渲染视图的数据源② dispatch 改变 state 的函数，可以理解为推动函数组件渲染的fect 第二个参数 deps ，但是注意 useEffect 初始化会默认执行一次

dispatch更新特点

与类组件一样，但是当调用改变 state 的函数dispatch，在本次函数执行上下文中，是获取不到最新的 state 值的

原因：函数组件更新就是函数的执行，在一次执行过程中，函数内部所有变量重新声明，所以改变的 state 只有在下一次函数执行时才更新。

useState 原理在之后 Hooks 讲解

问：类组件中的 setState 和函数组件中的 useState 有什么异同？

答：相同点：

原理：setState 和 useState 更新视图，底层都调用了 scheduleUpdateOnFiber 方法，而且事件驱动情况下都有批量更新规则语法：第一个参数都可以传入函数

不同点：

在不是 pureComponent 组件模式下， setState 不会浅比较两次 state 的值。只要调用 setState 就会执行更新。但是 useState 中 dispatchAction 会默认比较两次state是否相同来更新组件setState 有专门监听 state 变化的回调函数 callback，可以获取最新 state。但是 useState 只能通过 useEffect 来执行 state 变化引起的副作用setState 在底层处理逻辑时将旧 state 进行合并处理，而 useState 是重新赋值