前端跳槽突围课：React18底层源码深入剖析（21章完整版）

资料地址1：https://pan.baidu.com/s/1PMhK4e2M2JqMf4G-xBwi7w 提取码: wanu 资料地址2：https://share.weiyun.com/NknqKQrR 密码：ibm5id 在 2021 年 6 月 8 号，React 公布了 v18 版本的发布计划，并发布了 alpha 版本。经过将近一年的发布前准备，在 2022 年 3 月 29 日，React 18 正式版终于和大家见面了。 React 18 应该是最近几年的一个重磅版本，React 官方对它寄予了厚望。不然也不会将 React 17 作为一个过渡版本，也不会光发布准备工作就做了一年。 在过去一年，我们已经或多或少了解到一些 React 18 的新功能。这篇文章我会通过丰富的示例，向大家系统的介绍 React 18 带来的改变。 1、升级 react18 已经不支持IE浏览器 新项目： 直接用 npm 或者 yarn 安装最新版依赖即可（如果是js，可以不需要安装types类型声明文件） 改变根节点的挂载方式使用新的 API createRoot，使用旧的 API 仍然兼容，只有在使用 createRoot 了之后才会有 React 18 的新特性。 2、如何升级React 18 npm install react@latest react-dom@latest npm install @types/react@latest @types/react-dom@latest react18 使用 ReactDOM.createRoot() 创建一个新的根元素进行渲染，使用该 API，会自动启用并发模式。如果你升级到react18，但没有使用ReactDOM.createRoot()代替ReactDOM.render()时，控制台会打印错误日志要提醒你使用React，该警告也意味此项变更没有造成breaking change，而可以并存，当然尽量是不建议 import React, { StrictMode } from 'react'; import ReactDOM from 'react-dom/client'; import App from './app'; interface MyModule extends NodeModule { hot: { accept: () => void; }; } let myM: MyModule = module as MyModule; if (myM && myM.hot) { myM.hot.accept(); } // ReactDOM.render(<App />, document.querySelector('#root')); // ReactDOM.createRoot(document.querySelector('#root') as HTMLElement).render(<App />); const container = document.querySelector('#root'); // 装载 ReactDOM.createRoot(document.querySelector('#root')).render( <React.StrictMode> <App /> </React.StrictMode>, ); // 卸载 ReactDOM.createRoot(document.querySelector('#root')).unmount(); react18的更新特点 并发模式 Concurrent Mode（并发模式） react18的新特性是使用现代浏览器的特性构建的，彻底放弃对 IE 的支持。 并发模式是实现并发更新的基本前提 react18 中，以是否使用并发特性作为是否开启并发更新的依据。 并发特性指开启并发模式后才能使用的特性，比如：useDeferredValue/useTransition react17 和 react18 的区别就是：从同步不可中断更新变成了异步可中断更新，react17可以通过一些试验性的API开启并发模式，而react18则全面开启并发模式。 Automatic Batching自动批量更新state，减少渲染次数 react18之前，React Event Handler react18之后，React Event Handler、Promise、setTimeout、native event handler等 如何禁用（不推荐）—— 可以使用ReactDom；提供的flushSync方法 import {flushSync} from 'react-dom' function handleClick(){ flushSync(()=>{ setCounter(c=>c+1); }) // React has updated the DOM by now flushSync(()=>{ setFlag(f=>!f); }) // React has updated the DOM by now } 双缓冲架构 我们的 React 中，存在两颗上述的 Fiber 链表树，一颗是用于渲染页面的 current Fiber 树，一颗是 workInProgress Fiber 树，我们用于渲染当前页面的是 current Fiber 树，而我们在整个更新过程中会构建一颗叫做 workInProgress Fiber 树。 使用双缓冲树的原因是： 上面提到了，我们操作 Fiber 的过程是可能被中断的，所以我们不能直接更新当前的 Fiber ，这样可能会产生更新了一部分另一部分没更新的操作 在遍历 Fiber 树过程中，我们大量遇到节点不需要更新的情况出现，此时我们可以直接复用另一颗树上对应的 Fiber 来提升系统的性能和效率，复用 也是我们 React Diff 算法的精髓之一 在整个架构的顶部，有一个 FiberRootNode 节点，它存储了一些运行过程中的标志和数据等，它最重要的作用是通过 current 属性指向了当前工作的 Fiber 树的根，当我们的 workInProgress Fiber 生成完毕后，我们通过切换 current 属性的指向可以直接切换我们的整个工作树，使得 current 树和 workInProgress 树实现交换。 应用场景 React 18适用于各种类型的Web开发，包括但不限于： 单页应用 - 提供高效的组件化开发和动态数据更新。 移动应用 - 通过React Native支持原生移动平台，提供跨平台开发能力。 复杂UI - 利用并发模式和新的Hook API处理复杂的交互逻辑和动画效果。 高性能需求 - 通过流式服务器渲染和智能调度，显著提高首屏加载速度和用户体验。 特点 更高的性能 - 通过并发模式和流式渲染，React 18能够实现更快的更新和更好的用户体验。 易用性增强 - 新API简化了过渡效果和延迟更新的实现，降低了学习曲线。 兼容性保证 - React 18向后兼容，使得升级过程更为顺畅。 社区支持 - React拥有庞大的开发者社区，这意味着丰富的资源、插件和解决方案。 React 18的发布，不仅提升了React的核心竞争力，也为前端开发者提供了更多的工具和可能性。无论是新手还是经验丰富的开发者，都可以从这一新版本中获益，构建出更具现代感、高性能的应用程序。如果你还未尝试React 18，现在是时候踏上这场技术革新的旅程了！