![[嘿哈]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)
普寒
前端
前端
获得徽章 0
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
赞了这篇文章
赞了这篇沸点
![[给力]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_129.0b59244.png)
code.juejin.cn
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇沸点
赞了这篇文章
赞了这篇沸点
记录一下 React18 的主要更新：
1. 使用 ReactDOM.createRoot 注册根组件，这是唯一需要用户必须改动的地方，其他都是非必须。
2. Concurrent Mode 并发模式。组件更新时会准备多个版本的 VDOM ，先更新优先级高的，再更新优先级低的，后者可能会被前者打断。例如你正在家看电影，可以中断去拿快递。该过程 React 内部调度处理，无序使用者关心，类似于 OS 的进程调度。
3. startTransition 开始过度。CM 只提供了更新调度的能力，React 分不出你组件更新的优先级高低（默认都是高优先级），所以要用 startTransition 来告诉 React 哪个是低优先级任务。还可以使用 useTransition 获取 pending 状态，以方便切换 loading 组件。
4. Automatic Batching 自动批处理。React18 之前，只有 React 内部事件才支持批处理，即合并 state 一次性异步更新，而用户自定义的事件（DOM 事件、setTimeout、ajax 回调等）无法批处理。React18 开始，无论什么情况下，都支持批处理。用户使用无感知。不过，如果想强制使用同步更新，可使用 flushSync 。
5. Suspense 可用于 SSR 。React18 之前，SSR 必须渲染网页的全部内容，可能会因为某个组件而导致整个页面卡顿。React18 开始可以在 SSR 中使用 Suspense ，这样服务端可以分批返回内容 —— 流式渲染（其实也是老概念了）
6. useDeferredValue 让 state 延迟生效，当前无紧急任务时，才会更新 state 。和 startTransition 一个用意。
总结：React18 是一次重要更新，而且用户升级成本极低。从 React 16 引领大家写函数组件和 Hooks ，到现在升级了内核和更新算法，React 依然是前端框架界的天花板。
1. 使用 ReactDOM.createRoot 注册根组件，这是唯一需要用户必须改动的地方，其他都是非必须。
2. Concurrent Mode 并发模式。组件更新时会准备多个版本的 VDOM ，先更新优先级高的，再更新优先级低的，后者可能会被前者打断。例如你正在家看电影，可以中断去拿快递。该过程 React 内部调度处理，无序使用者关心，类似于 OS 的进程调度。
3. startTransition 开始过度。CM 只提供了更新调度的能力，React 分不出你组件更新的优先级高低（默认都是高优先级），所以要用 startTransition 来告诉 React 哪个是低优先级任务。还可以使用 useTransition 获取 pending 状态，以方便切换 loading 组件。
4. Automatic Batching 自动批处理。React18 之前，只有 React 内部事件才支持批处理，即合并 state 一次性异步更新，而用户自定义的事件（DOM 事件、setTimeout、ajax 回调等）无法批处理。React18 开始，无论什么情况下，都支持批处理。用户使用无感知。不过，如果想强制使用同步更新，可使用 flushSync 。
5. Suspense 可用于 SSR 。React18 之前，SSR 必须渲染网页的全部内容，可能会因为某个组件而导致整个页面卡顿。React18 开始可以在 SSR 中使用 Suspense ，这样服务端可以分批返回内容 —— 流式渲染（其实也是老概念了）
6. useDeferredValue 让 state 延迟生效，当前无紧急任务时，才会更新 state 。和 startTransition 一个用意。
总结：React18 是一次重要更新，而且用户升级成本极低。从 React 16 引领大家写函数组件和 Hooks ，到现在升级了内核和更新算法，React 依然是前端框架界的天花板。
展开
3
4
赞了这篇沸点
java开发、前端开发、自动化测试、C++开发、Rust开发、算法开发工程师![[勾引]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_121.570cd4d.png)
快到碗里来呀！全额五险一金，业界良心薪酬，股权期权等你来；
双休，法定年假+福利年假，带薪病假，还有10天婚假，积极响应国家政策；
年度体检、台球、乒乓球、按摩椅，免费健身房，任你发挥！
#公司避雷指南#
![[勾引]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_121.570cd4d.png)
快到碗里来呀！全额五险一金，业界良心薪酬，股权期权等你来；
双休，法定年假+福利年假，带薪病假，还有10天婚假，积极响应国家政策；
年度体检、台球、乒乓球、按摩椅，免费健身房，任你发挥！
#公司避雷指南#
展开
1
3