浏览器渲染

1 React JSX如何渲染？

JSX 本身不能被浏览器直接识别和执行，因为它不是标准的 JavaScript 语法。
JSX 是一种语法扩展，它允许开发者在 JavaScript 中以类似HTML的语法编写UI结构。

1. 使用编译器（如Babel）：Babel 可以将 JSX 代码转换为普通的 JavaScript 函数调用，通常是 React.createElement() 函数调用。这个过程被称为转译（transpilation）。例如：

const element = <h1>Hello, world!</h1>;

会被 Babel 转换为：（@babel/plugin-transform-react-jsx转化插件）

const element = React.createElement("h1", null, "Hello, world!");

React.createElement()函数是React框架的核心之一。它接收三个参数：

• 类型：组件的类型，可以是一个类（React.Component）或函数（function）。
• props：传递给组件的属性。
• children：子元素或内容。

Babel完成转换后，会输出纯JavaScript代码，这些代码可以在不支持JSX的JavaScript环境中运行。

2. 渲染
   一旦你通过React.createElement()创建了元素（即React元素），React的渲染流程会接管：

调和过程（Reconciliation）：React会比较新旧元素的差异，决定如何高效地更新DOM。

渲染：React根据调和过程的结果，调用原生的DOM API来更新浏览器的DOM结构。

组件生命周期：React会根据需要调用组件的生命周期方法，如componentDidMount、componentDidUpdate等。