React - 03 JSX语法示例及JSX渲染机制

1.根据变量控制元素显示/隐藏

2种方式，方式1会渲染但不显示，方式2不会渲染元素

2.循环列表渲染

用数组的map方法，直接将要循环的元素返回

如果数组的每个元素都是empty，则为稀疏数组，否则为密集数组，即使每个元素都是null也是密集数组

3.JSX渲染机制

第一步：把我们编写的JSX语法，编译为虚拟DOM对象「virtualDOM」

虚拟DOM对象：框架自己内部构建的一套对象体系（对象的相关成员都是React内部规定的），基于这些属性描述出，我们所构建视图中的，DOM节点的相关特征！！

@1 基于 babel-preset-react-app 把JSX编译为 React.createElement(...) 这种格式！！

只要是元素节点，必然会基于createElement进行处理！

React.createElement(ele,props,...children)

+ ele：元素标签名「或组件」

+ props：元素的属性集合(对象)「如果没有设置过任何的属性，则此值是null」

• children：第三个及以后的参数，都是当前元素的子节点

@2 再把 createElement 方法执行，创建出virtualDOM虚拟DOM对象「也有称之为：JSX元素、JSX对象、ReactChild对象...」！！

virtualDOM = {
  $$typeof: Symbol(react.element),
  ref: null,
  key: null,
  type: 标签名「或组件」,
  // 存储了元素的相关属性 && 子节点信息
  props: {
  元素的相关属性,
  children:子节点信息「没有子节点则没有这个属性、属性值可能是一个值、也可能是一个数组」
  }
}

模拟createElement方法

第二步：把构建的virtualDOM渲染为真实DOM

真实DOM：浏览器页面中，最后渲染出来，让用户看见的DOM元素！！

基于ReactDOM中的render方法处理的！！

// v16
ReactDOM.render(
    <>...</>,
    document.getElementById('root')
);

// v18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <>...</>
);

封装each方法(for in)

（Object.getOwnPropertyNames，Object.getOwnProertySymbols）

模拟render函数

补充说明：第一次渲染页面是直接从virtualDOM->真实DOM；但是后期视图更新的时候，需要经过一个DOM-DIFF的对比，计算出补丁包PATCH（两次视图差异的部分），把PATCH补丁包进行渲染！！