react06-jsx渲染机制-Toy模板网

这篇具有很好参考价值的文章主要介绍了react06-jsx渲染机制。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

react06-jsx渲染机制

react.createElemnet() ==》构建虚拟dom

构建视图的具体流程：

将jsx语法，编译为虚拟dom对象，根据react中的处理生成virtualDom ，这是react自己内部构建的一套对象体系，基于jsx中的属性描述构建成视图中真实DOM的相关描述,具体通过 React.createElement(type , props , children)
将虚拟dom构建成真实dom
补充：第一次渲染是直接从虚拟dom----> 真实dom，之后的每次视图更新都是根据diff比对进行计算，生成两次的差异部分的PATH布丁包

react06-jsx渲染机制,react,react.js,前端

在https://babeljs.io中看一下具体的编译后结果
将右侧编译后的代码在vs code中展示如下：
打印出来可以看到

virtualDOM = {
$$typeof : Symbol(react.element),
ref: null,
key : null ,
type：标签名或「组件名」
props : {
// 元素的相关属性，className,x，y,title …
// children : 子节点信息「没有子节点则没有此属性，若只有一个子节点为对象，若有多个子节点则为数组，每个元素为子节点virtualDom对象」
} ,
}
以上是react内部的创建虚拟dom的过程，接下来是通过render方法将virtualDom创建成真实dom，然后浏览器渲染

react.render() ===> 构建真实dom

v16 和 v18 语法上有些差异
v16 ： ReactDom.render(<> …</> , document.getElementById(‘root’))
v18 : const root = ReactDom.createRoot(document.getElementById(‘root’)) root.render(<>…</>)

模拟一下大概的render处理
react06-jsx渲染机制,react,react.js,前端