react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程

JSX 的本质

JSX 代码本身并不是 HTML，也不是 Javascript，在渲染页面前，需先通过解析工具（如babel）解析之后才能在浏览器中运行。

babel官网可查看 JSX 解析后的效果

更早之前，Babel 会把 JSX 转译成一个 React.createElement() 函数调用，功能与现在的 jsxs 函数类似

React.createElement() 的语法

相当于 vue 的 h 函数

例如

js 复制代码

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

会被Babel 转译为

js 复制代码

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 会创建对象

js 复制代码

// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

这些对象被称为 "React 元素"。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 并保持随时更新。

SyntheticEvent 合成事件机制

react 中的事件，不是原生事件（vue 中是原生事件），而是SyntheticEvent 合成事件。

为什么要用合成事件机制 ?

为什么从 react 17 开始，要改为绑定到 root?

因为这样更利于多个 React 版本并存，例如微前端。

组件渲染过程

组件更新过程

之所以分为了两个阶段，是为了方便 fiber 优化性能

fiber 是 React 的内部运行机制

通过 window.requestIdleCallback 可获知 DOM 是否需要渲染，但 window.requestIdleCallback 有的浏览器不支持，所以在不支持window.requestIdleCallback 的浏览器上，无法使用 fiber 优化性能

因 JS 是单线程，且和 DOM 渲染共用一个线程，当组件足够复杂，组件更新时，计算和渲染的压力都很大，同时再有 DOM 操作需求(动画，鼠标拖拽等)，就很容易出现页面卡顿（DOM 渲染等待 JS 计算）

JSX 的本质