React18升级过程1. 依赖包升级 react, react-dom, @types/react, @types/r

1. 依赖包升级

react, react-dom, @types/react, @types/react-dom

2. 引入方式变更 `createRoot`

ReactDOM.render

其工作方式与 React 17 完全相同。
createRoot

// React 17
import ReactDOM from 'react-dom';

const container = document.getElementById('app');

ReactDOM.render(<App tab="home" />, container);


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

const container = document.getElementById('app');
const root = createRoot(container);

root.render(<App tab="home" />);

3. 升级过程中遇到的问题

react-router-v5 跳转页面不刷新

github.com/facebook/re…

demo codesandbox.io/s/react18-r…

最后排查发现并不是两个包不兼容的问题, 而是BrowserRouter组件嵌套过深导致的, 解决办法是将BrowserRouter提到更上层一些

react18 带来的新变化

1. 并发 concurrent

并发是一种底层功能

全部都是急迫的任务

渲染是可以中断，低优先级任务，可以让高优先级的任务先更新渲染

startTransition codesandbox.io/s/starttran…
useTransition codesandbox.io/s/starttran…
useDeferredValue 值更新延迟
useSyncExternalStore
useInsertionEffect - 此时还无法访问 DOM 节点

场景 1

2. 批处理

function handleClick() {
  setStateA(1);
  setStateB(true);
  // 批处理：会合并为一次 render
}

function handleClick() {
  Promise.resolve().then(() => {
    setStateA(1);
  });
  setStateB(false);
  // 会执行两次 render
}

flushSync 退出批处理

function handleClick() {
  flushSync(() => {
    setStateA(3);
  });
  // 会在 setStateA 并 render 之后再执行 setStateB
  setStateB(true);
}

应用场景: 表单弹框关闭关闭

3. ssr

引入方式变更

总结

没有必须非用不可的功能

主要围绕着并发模式而展开, 可能并不会直接使用到

目前还存在的问题

注意: 不再支持 IE

参考

React 18 超全升级指南

React18有哪些新特性——XDM、开卷！

「React18新特性」深入浅出用户体验大师—transition

React18升级过程