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布丁包

在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处理

先封装一个简单的对象遍历方法，方便对节点对象操作

这是我所了解到的react处理渲染大致流程，如有遗漏，欢迎补充交流