react18中的jsx 底层渲染机制相关原理
jsx 底层渲染机制
- 渲染 jsx 时，会先解析 jsx，生成一个虚拟 dom(virtual dom)。
- 然后将虚拟 dom 渲染成真实 dom。
- 如果 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);
});
