react18中的jsx 底层渲染机制相关原理

jsx 底层渲染机制

1. 渲染 jsx 时，会先解析 jsx，生成一个虚拟 dom(virtual dom)。
2. 然后将虚拟 dom 渲染成真实 dom。
3. 如果 jsx 中包含事件，会将事件绑定到真实 dom 上。

虚拟 dom 对象，是框架内部构建的一套对象体系，对象相关的属性方法都是 react 内部规定的，
基于这些属性描述出，我们所有构建的视图中，dom 节点相关的特征。

真实 dom，就是浏览器页面中，让用户看到的页面内容。

`- 补充说明：

基于babel-preset-react-app，jsx 最终会被编译成 React.createElement 函数调用。执行后，会生成一个虚拟 dom 对象。

• 第一次渲染页面，是直接从 vdom-dom 生成真实 dom
  
  

• 第二次渲染页面，是先生成虚拟 dom，然后对比 vdom 和 dom 的差异，这个过程就是 dom-diff,计算出补丁包patch,两次视图差异的部分，最后更新变化的部分。`

v16/v17 中

ReactDOM.render(<App />, document.getElementById("root"));

v18 中

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

jsx 页面渲染的规律

• undefined,null,‘’,Symbol,BigInt 会渲染成空字符串。
• 数字，字符串正常显示。
• 数组，会渲染成字符串，且去掉了数组中多余的逗号。
• 对象，无法渲染，会报错。
• 函数对象，不支持在{}中渲染，会报错。可以作为函数组件，用渲染。

元素样式

• 驼峰命名法：fontSize，backgroundImage。
• style中需要使用{ {}}。
• 字符串拼接：style={ {color:'red',fontSize:14+'px'}}。
• 对象：style={styles.div}。

元素的类

• 字符串拼接：className='div',不要用class
• 对象：className={styles.div}。

const arr1 = new Array(5); // 创建一个长度为5的数组，并赋值undefined，是稀疏数组
console.log(arr1);
arr1.forEach((value, index, array) => {
    
    
  console.log(value, index, array);
});

forEach无法迭代稀疏数组

const arr1 = new Array(5).fill(5); // 创建一个长度为5的数组，并赋值5，密集数组
console.log(arr1);
arr1.forEach((value, index, array) => {
    
    
  console.log(value, index, array);
});