前端随笔（六）——React 18为我们带来了什么？

1.React18 （？？？什么，你连React18都不知道）

2.React18带来了什么？

【1】新的 ReactDOM.createRoot() API；

【2】自动批处理方法；

【3】非紧急状态更新

---

1.React18 （？？？什么，你连React18都不知道）

距离2021年6月份React官方发布了React18的Alpha版本已经过去了大半年了。相信小伙伴们应该对18版本已经有初步的了解和感悟了吧！这不，2022年3月份，React再次发布React18的RC版本。

（Alpha版本的安装）

npm install react@alpha react-dom@alpha
# or
yarn add react@alpha react-dom@alpha

这次发布的 RC 版本(Release Candidate候选版本），基本和最终发布的 stable 版本一样，功能上不会再有太大变化，也更加稳定，大家可以尝试在生产环境里用起来了 ～

那么？我们要如何使用它呢？（输入以下指令安装React18RC版本即可进行使用）

npm install react@rc react-dom@rc

2.React18带来了什么？

据悉，React18会弃用一部分前序版本中的方法，例如使用ReactDOM.render就会在控制台出现warning告诉我们该方法即将被弃用，应该使用18版本提供的新方法；那这次新版本发布具体涉及到了哪些变化呢？

【1】新的 ReactDOM.createRoot() API；

在新版本中，React为我们提供了ReactRoot方法来替换以前使用的ReactDOM.render将组建导入到待渲染的DOM容器中。

具体使用方法如下：

import {createRoot} from 'react-dom/client'

const 变量a =document.gaeElementById('DOM容器');
const 方法b =createRoot(a);

b.render(
    <组件名 />
)

【2】自动批处理方法；

批处理是 React 将多个状态更新分组到一个重新渲染中以获得更好的性能。如果没有自动批处理，我们只能在 React 事件绑定后进行批处理更新。

默认情况下，Promise、setTimeout、native event handlers 或任何其他事件内部的更新不会在 React 中批处理。使用自动批处理，这些更新将自动批处理：

自动批处理的本质就是状态更新不再依赖于事件进行而是自动触发更新的。

在React18以前，异步回调函数以外所有对页面的渲染会合并为一次进行，但回调内的渲染无法合并，仍是分开进行多次渲染；在18版本中，无论是Promise还是setTimeout异步回调的更新状态都会被自动默认合并从而触发批处理；

我们也可以使用ReactDOM.flushSync();来退出批处理。

【3】非紧急状态更新

非紧急状态更新通常用于解决当前执行的操作涉及的原始数据量过大引起的由于数据更新加载导致的卡顿现象。

该方法可以将待处理数据标记为transitions状态，从而调用startTransition方法。startTransition 是 React 18 新增加的一个 API，它可以让你区分非紧急的状态更新。所有在 startTransition 回调中的更新都会被认为是非紧急处理，如果出现更紧急的更新（比如用户又输入了新的值/新数据更新），则上面的更新都会被中断，直到没有其他紧急操作之后才会去继续执行更新。

本质：在当前更新操作进行时，如果有更加紧急或重要的状态更新时就会阻断当前操作，直到处理完紧急更新才会继续当前操作。