Open xiaochengzi6 opened 1 year ago
react 渲染一开始会将 jsx 转换成 vdom 然后在转换成 fiber 最后生成 dom 节点
jsx 转换成 vdom 这个阶段称之为 reconcile 阶段或者 render 阶段，fiber 转换成 dom 节点这个阶段称之为 commit 阶段
在执行到 render 阶段时就会去标记 executionConetxt: unbatch 然后去更新的时候就会批量异步更新，而在异步中执行 setState 或者 useState 不会再 render 阶段去标记上 unbatch 就会使用同步更新的方式
所以 react v17 setState || useState 更新是否异步要取决于是否在异步中 执行，但这个情况在 react v18 中得到解决，全部都是异步的批量更新
参考文章: react 中 setState 是否是异步更新
在这例子中react-hook原理 可以看到 class 组件通过实例化后会得到一个实例对象那每次更新都会取这个对象的最新的状态在异步中调用 setState 实际上是同步更新，所以就能打印 1,2,3,4,5 但是在函数组件中函数执行完了就会去销毁并不会保存状态，每次更新都相当于重新赋值，使用 hook 就是保存函数中的状态使其能够在下一次更新中获得最新值，由于是在当前函数中调用的 console.log() 实际上就是获得当前函数的状态，调用 useState() 会使函数重新调用这个函数才是最新的状态，所以会打印 00000
react 渲染一开始会将 jsx 转换成 vdom 然后在转换成 fiber 最后生成 dom 节点
jsx 转换成 vdom 这个阶段称之为 reconcile 阶段或者 render 阶段，fiber 转换成 dom 节点这个阶段称之为 commit 阶段
在执行到 render 阶段时就会去标记 executionConetxt: unbatch 然后去更新的时候就会批量异步更新，而在异步中执行 setState 或者 useState 不会再 render 阶段去标记上 unbatch 就会使用同步更新的方式
所以 react v17 setState || useState 更新是否异步要取决于是否在异步中 执行，但这个情况在 react v18 中得到解决，全部都是异步的批量更新
参考文章: react 中 setState 是否是异步更新
在这例子中react-hook原理 可以看到 class 组件通过实例化后会得到一个实例对象那每次更新都会取这个对象的最新的状态在异步中调用 setState 实际上是同步更新，所以就能打印 1,2,3,4,5 但是在函数组件中函数执行完了就会去销毁并不会保存状态，每次更新都相当于重新赋值，使用 hook 就是保存函数中的状态使其能够在下一次更新中获得最新值，由于是在当前函数中调用的 console.log() 实际上就是获得当前函数的状态，调用 useState() 会使函数重新调用这个函数才是最新的状态，所以会打印 00000