`1. 开发环境配置

1.1 文件夹结构

文件 / 文件夹 描述
src 存储源文件
dist 存储客户端代码打包文件
build 存储服务端代码打包文件
server.js 存储服务器端代码
webpack.config.server.js 服务端 webpack 配置文件
webpack.config.client.js 客户端 webpack 配置文件
babel.config.json babel 配置文件
package.json 项目工程文件

创建 package.json 文件：npm init -y

1.2 安装项目依赖

开发依赖：npm install webpack webpack-cli webpack-node-externals @babel/core @babel/preset-env @babel/preset-react babel-loader nodemon npm-run-all -D

项目依赖：npm install express

依赖项 描述
webpack 模块打包工具
webpack-cli 打包命令
webpack-node-externals 打包服务器端模块时剔除 node_modules 文件夹中的模块
@babel/core JavaScript 代码转换工具
@babel/preset-env babel 预置，转换高级 JavaScript 语法
@babel/preset-react babel 预置，转换 JSX 语法
babel-loader webpack 中的 babel 工具加载器
nodemon 监控服务端文件变化，重启应用
npm-run-all 命令行工具，可以同时执行多个命令
express 基于 node 平台的 web 开发框架

1.3 环境配置

1.3.1 创建 web 服务器
  1. // server.js
  2. import express from "express"
  3. const app = express()
  4. app.use(express.static("dist"))
  5. const template = `
  6.   <html>
  7.     <head>
  8.       <title>React Fiber</title>
  9.     </head>
  10.     <body>
  11.       <div id="root"></div>
  12.             <script src="bundle.js"></script>
  13.     </body>
  14.   </html>
  15. `
  16. app.get("*", (req, res) => {
  17.   res.send(template)
  18. })
  19. app.listen(3000, () => console.log("server is running"))

1.3.2 服务端 webpack 配置
  1. // webpack.config.server.js
  2. const path = require("path")
  3. const nodeExternals = require("webpack-node-externals")
  5. module.exports = {
  6.   target: "node",
  7.   mode: "development",
  8.   entry: "./server.js",
  9.   output: {
  10.     filename: "server.js",
  11.     path: path.resolve(__dirname, "build")
  12.   },
  13.   module: {
  14.     rules: [
  15.       {
  16.         test: /\.js$/,
  17.         exclude: /node_modules/,
  18.         use: {
  19.           loader: "babel-loader"
  20.         }
  21.       }
  22.     ]
  23.   },
  24.   externals: [nodeExternals()]
  25. }

1.3.3 babel 配置
  1. {
  2.   "presets": ["@babel/preset-env", "@babel/preset-react"]
  3. }

1.3.4 客户端 webpack 配置
  1. const path = require("path")
  3. module.exports = {
  4.   target: "web",
  5.   mode: "development",
  6.   entry: "./src/index.js",
  7.   output: {
  8.     filename: "bundle.js",
  9.     path: path.resolve(__dirname, "dist")
  10.   },
  11.   devtool: "source-map",
  12.   module: {
  13.     rules: [
  14.       {
  15.         test: /\.js$/,
  16.         exclude: /node_modules/,
  17.         use: {
  18.           loader: "babel-loader"
  19.         }
  20.       }
  21.     ]
  22.   }
  23. }

1.3.5 启动命令
  1. "scripts": {
  2.   "start": "npm-run-all --parallel dev:*",
  3.   "dev:server-compile": "webpack --config webpack.config.server.js --watch",
  4.   "dev:server": "nodemon ./build/server.js",
  5.   "dev:client-compile": "webpack --config webpack.config.client.js --watch"
  6. },

2. requestIdleCallback

2.1 核心 API 功能介绍

利用浏览器的空余时间执行任务，如果有更高优先级的任务要执行时，当前执行的任务可以被终止，优先执行高级别任务。

  1. requestIdleCallback(function(deadline) {
  2.   // deadline.timeRemaining() 获取浏览器的空余时间
  3. })

2.2 浏览器空余时间

页面是一帧一帧绘制出来的，当每秒绘制的帧数达到 60 时，页面是流畅的，小于这个值时， 用户会感觉到卡顿

1s 60帧，每一帧分到的时间是 1000/60 ≈ 16 ms，如果每一帧执行的时间小于16ms，就说明浏览器有空余时间

如果任务在剩余的时间内没有完成则会停止任务执行，继续优先执行主任务，也就是说 requestIdleCallback 总是利用浏览器的空余时间执行任务

2.3 API 功能体验

页面中有两个按钮和一个DIV，点击第一个按钮执行一项昂贵的计算，使其长期占用主线程，当计算任务执行的时候去点击第二个按钮更改页面中 DIV 的背景颜色。

使用 requestIdleCallback 就可以完美解决这个卡顿问题。

  1. <div class="playground" id="play">playground</div>
  2. <button id="work">start work</button>
  3. <button id="interaction">handle some user interaction</button>
  1. <style>
  2.   .playground {
  3.     background: palevioletred;
  4.     padding: 20px;
  5.     margin-bottom: 10px;
  6.   }
  7. </style>
  1. var play = document.getElementById("play")
  2. var workBtn = document.getElementById("work")
  3. var interactionBtn = document.getElementById("interaction")
  4. var iterationCount = 100000000
  5. var value = 0
  7. var expensiveCalculation = function (IdleDeadline) {
  8.   while (iterationCount > 0 && IdleDeadline.timeRemaining() > 1) {
  9.     value =
  10.       Math.random() < 0.5 ? value + Math.random() : value + Math.random()
  11.     iterationCount = iterationCount - 1
  12.   }
  13.   requestIdleCallback(expensiveCalculation)
  14. }
  16. workBtn.addEventListener("click", function () {
  17.   requestIdleCallback(expensiveCalculation)
  18. })
  20. interactionBtn.addEventListener("click", function () {
  21.   play.style.background = "palegreen"
  22. })

3 Fiber

1.gif2.gif

3.1 问题

React 16 之前的版本比对更新 VirtualDOM 的过程是采用循环加递归实现的，这种比对方式有一个问题，就是一旦任务开始进行就无法中断，如果应用中组件数量庞大，主线程被长期占用，直到整棵 VirtualDOM 树比对更新完成之后主线程才能被释放，主线程才能执行其他任务。这就会导致一些用户交互，动画等任务无法立即得到执行，页面就会产生卡顿, 非常的影响用户体验。

核心问题：递归无法中断，执行重任务耗时长。 JavaScript 又是单线程，无法同时执行其他任务，导致任务延迟页面卡顿，用户体验差。

3.2 解决方案

  1. 利用浏览器空闲时间执行任务，拒绝长时间占用主线程
  2. 放弃递归只采用循环，因为循环可以被中断
  3. 任务拆分，将任务拆分成一个个的小任务

3.3 实现思路

在 Fiber 方案中，为了实现任务的终止再继续，DOM比对算法被分成了两部分：

  1. 构建 Fiber (可中断)
  2. 提交 Commit (不可中断)

DOM 初始渲染: virtualDOM -> Fiber -> Fiber[] -> DOM

DOM 更新操作: newFiber vs oldFiber -> Fiber[] -> DOM

3.4 Fiber 对象

  1. {
  2.   type         节点类型 (元素, 文本, 组件)(具体的类型)
  3.   props        节点属性
  4.   stateNode    节点 DOM 对象 | 组件实例对象
  5.   tag          节点标记 (对具体类型的分类 hostRoot || hostComponent || classComponent || functionComponent)
  6.   effects      数组, 存储需要更改的 fiber 对象
  7.   effectTag    当前 Fiber 要被执行的操作 (新增, 删除, 修改)
  8.   parent       当前 Fiber 的父级 Fiber
  9.   child        当前 Fiber 的子级 Fiber
  10.   sibling      当前 Fiber 的下一个兄弟 Fiber
  11.   alternate    Fiber 备份 fiber 比对时使用
  12. }

3.png