JSX 的本质
JSX 代码本身并不是 HTML，也不是 Javascript，在渲染页面前，需先通过解析工具（如babel）解析之后才能在浏览器中运行。
babel官网可查看 JSX 解析后的效果
更早之前，Babel 会把 JSX 转译成一个 React.createElement() 函数调用，功能与现在的 jsxs 函数类似
React.createElement() 的语法
相当于 vue 的 h 函数
- 第1个参数：标签名（字符串），或组件（变量）
- 第2个参数：属性为key 的对象
- 之后的参数是子元素，多个子元素，也可以用数组包裹放在第三个元素的位置
- 返回 vnode
例如
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
会被Babel 转译为
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement() 会创建对象
// 注意：这是简化过的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 并保持随时更新。
SyntheticEvent 合成事件机制
react 中的事件，不是原生事件（vue 中是原生事件），而是SyntheticEvent 合成事件。
为什么要用合成事件机制 ?
- 更好的兼容性和跨平台（自定义封装的合成事件对象，更方便添加兼容性和跨平台的相关代码）
- 统一挂载到 document 或 id 为root 的根节点 （从 react 17 开始是 root ），可以减少内存消耗，避免频繁解绑
- 方便事件的统一管理(如事务机制)
为什么从 react 17 开始，要改为绑定到 root?
因为这样更利于多个 React 版本并存，例如微前端。
组件渲染过程
- 通过 props ，state 初始化变量
- 通过 render() 函数生成虚拟节点 vnode
- 通过 patch(elem, vnode) 函数（不一定叫 patch，具体可能是其他名字，功能相同）渲染页面
组件更新过程
- 通过 setState(newState) 修改响应式变量，生成 dirtyComponents (可能有子组件)
- 通过 render() 函数生成虚拟节点 vnode
- 通过 patch(elem, vnode) 函数（不一定叫 patch，具体可能是其他名字，功能相同）渲染页面
更新的 patch 分为两个阶段
- reconciliation 阶段-执行 diff 算法,纯 JS 计算
- commit 阶段-将 diff 结果渲染 DOM
之所以分为了两个阶段，是为了方便 fiber 优化性能
fiber 优化性能的原理
fiber 是 React 的内部运行机制
- 将 reconciliation 阶段拆分成多个任务（commit 阶段无法拆分）
- 当 DOM 需要渲染时暂停 reconciliation 中的任务，等无需进行 DOM 渲染时继续执行 reconciliation 中的任务
通过 window.requestIdleCallback 可获知 DOM 是否需要渲染，但 window.requestIdleCallback 有的浏览器不支持，所以在不支持window.requestIdleCallback 的浏览器上，无法使用 fiber 优化性能
哪些场景需要 fiber 优化性能 ？
因 JS 是单线程，且和 DOM 渲染共用一个线程，当组件足够复杂，组件更新时，计算和渲染的压力都很大，同时再有 DOM 操作需求(动画，鼠标拖拽等)，就很容易出现页面卡顿（DOM 渲染等待 JS 计算）
