React 18带来的新变化

React 18带来的新变化

简介

​ 2022年3月，react正式发布v18，在带来很多新特性的同时，也废弃了在ie上的兼容性，如果想在ie上继续使用，建议依然使用18以下版本。

​ 本文将对react18的新特性做概述。以及如何升级到react18版本做简单描述，或者可以去官网查看。

架构概述

​ react18无疑将Concurrent模式从unstable变更为stable模式，在使用createRoot即可实现基于fiber架构下的异步、可中断、可恢复渲染模式，无疑提高了浏览器渲染效率。大多特性也是基于Concurrent渲染模式下的新增。

那么，什么是Concurrent模式？

Concurrent是基于react v16版本以下的Stack Reconciler（栈调和）模式做的进一步改进。

在Stack Reconciler渲染模式下，react内部通过深度遍历虚拟DOM树来构建应用，并且这个过程是不可中断的，也就是说会持续占用主线程。倘若虚拟DOM树结构复杂，将会占用大量时间，这时候浏览器event时间线程、UI渲染线程都处于等待状态，导致页面卡死。这是灾难级的。

而Concurrent渲染模式，通过将渲染任务切分为多个子任务，通过优先级进行任务调度，实现异步渲染（这种情况真是和协程太像了）。从而实现渲染效率的提升。

实现方式也比较简单，这里直接贴上官方用法：

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

function HelloMessage({
     name }) {
   
  return <div>Hello {
   name}</div>;
}

const root = createRoot(document.getElementById('container'));
root.render(<HelloMessage name="Taylor" />);

说了这么多，究竟有哪些新特性，一睹为快！

自动批处理

react18以前，批处理是react针对多次更新组件内部state进行的一种优化，可以在适当时机，对state统一做一次state更新。但是这种机制只针对react中的事件机制。如果在setTimeOut、Promise、原声事件时，这种机制就会失效。如：

setTimeout(() => {
   
  setCount(c => c + 1);
  setFlag(f => !f);
  // React将针对setState渲染两次，即setState变为同步
}, 1000);

react18下，这种情况批处理机制依然有效：