react18新变化

react18 新变化

• 参考文章 1：https://mp.weixin.qq.com/s/nAuLfU2He8iuh8hNucohfg

  • 文章截图：https://gitee.com/wangluoshihuang/static_article/blob/master/react/React%2018%20%E5%B8%A6%E7%BB%99%E6%88%91%E4%BB%AC%E7%9A%84%E6%83%8A%E5%96%9C.html

• 参考文章 2：https://mp.weixin.qq.com/s/t3dYc3Md1dpiv1vaFa5plA

  • 文章截图：https://gitee.com/wangluoshihuang/static_article/blob/master/react/React%2018%20%E5%85%A8%E8%A7%88.html

• React 18 之前，如果在回调函数的异步调用中，执行 setState，由于丢失了上下文，无法做合并处理，所以每次 setState 调用都会触发一次 re-render。而 React 18 带来变化便是，任何情况下都可以合并渲染了！

• 如果你希望在 React 18 的 setState 后立即执行重新渲染， 只需要使用 ReactDOM.flushSync 包裹即可

• startTransition——非紧急渲染：简单来说，被 startTransition 包裹的 setState 触发的渲染被标记为不紧急渲染，意味着他们可以被其他紧急渲染所抢占。这种渲染优先级的调整手段可以帮助我们解决各种性能伪瓶颈，提升用户体验。

• useTransition：https://juejin.cn/post/7126481115203780638

  • useTransition() 告诉 React 一些状态更新具有较低的优先级，即每个其他状态更新或 UI 渲染触发器具有较高的优先级。当我们调用 useTransition() 时，我们得到一个包含两个元素的数组：一个 isPending 布尔值，它指示低优先级状态更新是否仍处于挂起状态，以及一个 startTransition() 函数，您可以将状态更新包装起来告诉 React 这是一个低优先级的更新。
  • 个人感觉 startTransition 就是 useTransition()生产出来的一个函数。

• useDeferredValue：https://juejin.cn/post/7083466010505773093

  • 示例 3 是正确用法
  • 简单解释一下，就是 useDeferredValue 可以让我们延迟渲染不紧急的部分，类似于防抖但没有固定的延迟时间，延迟的渲染会在紧急的部分先出现在浏览器屏幕以后才开始，并且可中断不会阻塞用户输入。
  • 自注：他的作用是延迟数据的更新。而 startTransition 是降低渲染优先级。

• 更多可以参考文章：https://mp.weixin.qq.com/s/nAuLfU2He8iuh8hNucohfg

• 如何开启 react 的并发模式：

  • react16、react17 与 react18 方法不同：https://blog.osvlabs.com/?p=292

• useSyncExternalStore 的使用

  • https://juejin.cn/post/7056588815170813965

• useInsertionEffect 的使用

  • 这个 Hooks 只建议 css-in-js库来使用。这个 Hooks 执行时机在 DOM 生成之后，useLayoutEffect 生效之前，一般用于提前注入 <style> 脚本。
    • https://mp.weixin.qq.com/s/t3dYc3Md1dpiv1vaFa5plA（参考文章2）

• flushSync :

  • 果你在某种场景下不想使用批处理，你可以通过 flushSync来强制同步执行（比如：你需要在状态更新后，立刻读取新 DOM 上的数据等。）
    • https://mp.weixin.qq.com/s/t3dYc3Md1dpiv1vaFa5plA（参考文章2）

• useEffect 在开发模式执行两遍：

  • 
    • 对应文章：https://blog.csdn.net/lhkuxia/article/details/144944681