React进阶-虚拟 DOM 和 Diff 算法

目录

1. 虚拟 DOM

2. React JSX 语法转化的过程 

3. Diff 算法的说明

Diff 算法的示例 - 1

Diff 算法的示例 - 2

Diff 算法的示例 - 3

key 属性

4. 虚拟 DOM 的真正价值

5. React Fiber

浏览器刷新频率与 JS 运行时间

React 15 的虚拟 DOM 和 Diff

React 16 的 Fiber 架构

Concurrent Mode

双缓存 Fiber tree

浏览器的 requestIdleCallback API

6.useState 模拟实现

模拟实现 useState

模拟实现 useEffect 

1. 虚拟 DOM

虚拟 DOM（Virtual DOM），就是一个 JS 对象，用来描述我们希望在页面中看到的 HTML 结构内容.

为什么使用虚拟 DOM？ 真实 DOM 对象属性多，处理起来繁琐、效率低。更重要的原因：React 要做跨平台开发，而不是被束缚在浏览器端。

• 原生 DOM 对象： 也是一个 JS 对象，是浏览器默认提供的
• DOM 对象 和 HTML 元素之间是一一对应的关系

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello JSX!'
  }
}

// JSX

const d1 = 

// 虚拟DOM => { type: 'div' }
// const divDOM = document.createElement('div')

123
// 虚拟DOM => { type: 'div', props: { chilren: '123' } }

123
// 虚拟DOM => { type: 'div', props: { className: 'tab', chilren: '123' } }

2. React JSX 语法转化的过程 

• 转化过程：JSX => React.createEelement() 或 _jsxRuntime => 虚拟 DOM ----> DOM -> HTML

// JSX
const el = 
 {}}>123

// 旧的转化方式：
// React 元素
const el = /*#__PURE__*/ React.createElement(
  "div",
  {
    className: "abc",
    onClick: () => {}
  },
  "123"
);

// 新的转化方式：
var _jsxRuntime = require("react/jsx-runtime");
const el = /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
  className: "abc",
  onClick: () => {},
  children: "123"
});

// 虚拟 DOM
{
  type: 'div',
  props: {
    className: "abc",
    onClick: () => {},
    children: "123"
  }
}