聊聊React18的那些事儿～

react18于 2022年3月29日 正式发布，这个版本是react团队精心打磨了好几年才推出的，所以可以说是一个非常重要的版本，在提升react性能的同时，也带来了一些使用层面的调整，本篇文章就准备聊聊react18里的更新内容，废话不多说，开搞！

正文

总体来说，react18引入如下的一些新特性

1. transition: 提供了可以手动降级指定渲染任务的api
2. start: react启动应用的方式调整
3. auto batch update: 在react上下文之外，实现了批量更新
4. suspense: 提供更好的异步流程控制

下面依次来讲解它们

transition

我们知道，在react16里引入了fiber架构，它将我们应用中的任务进行了优先级的区分，但这一切都是react帮我们去做的，我们无法手动去干预，但是在react18里，给我们提供了两个api，让我们可以根据需求，手动降级指定的渲染任务

1. useTransition: const [isPending,startTransition] = useTransition(),将所有需要降级的更新操作放到startTransition的回调函数内，形如 startTransition(()=>{setLowUpdate(‘setLowUpdate’)})
2. useDeferredValue: const deferredValue = useDeferredValue(state),模板中基于deferredValue渲染的内容，会被进行降级处理，最终效果就是其内容更新滞后，保证高优先级渲染任务先完成

start

在启动react应用时，18里面稍作了调整，具体如下

import { createRoot } from 'react-dom/client'
import App from 'app.jsx'

const container  = document.querySelector('#app')
const root = createRoot(container)
root.render(<App />)

auto batch update

在18之前，如果脱离了react上下文环境，比如

1. timer的回调
2. 网络回调
3. 自定义事件监听回调

那么我们去多次调用更新函数时，就会触发多次重渲染，进而影响程序性能，但在18中对此做了优化，也就是说上述情景下react都是进行批量渲染的，最终只会触发一次重渲染

如果想保持之前的行为，可以使用 flushSync 来禁用，但不推荐

suspense

在18之前，suspense主要是配合 react.lazy 进行异步组件的动态导入，在18里，赋予了它控制异步流程的能力，简单来说，就是对于需要进行异步请求的组件，可以通过suspense进行组合，从而分别进行loading的控制，从而能更好的去管理应用的加载状态

但是要想使用，异步请求的实现方式必须要与其进行配套改造，具体怎么去改造，我还没有去研究，等以后有了一定的见解后，再单独成文吧

结语

不知不觉react都到18了，感觉日子过得飞快啊，但是学习的脚步还是不能停下来，这样才能紧跟这些框架的步伐，最终成为一个技术的弄潮儿，哈哈！