React学习笔记二——JSX底层处理机制

第一步：把我们编写的JSX语法，用babel编译为createElement格式

虚拟DOM对象：框架自己内部构建的一套对象体系（对象的相关成员都是React内部规定的），基于这些属性描述出，我们所构建视图中的，DOM节点的相关特征。基于 babel-preset-react-app 把JSX编译为 React.createElement(...) 这种格式， 只要是元素节点，必然会基于createElement进行处理：React.createElement(ele,props,...children)

• ele：元素标签名「或组件」
• props：元素的属性集合(对象)「如果没有设置过任何的属性，则此值是null」
• children：第三个及以后的参数，都是当前元素的子节点

    <div title={"文章"}>
        我是内容           ele:"div" / props:{title:"文章"} / children:"我是内容"
    </div>

使用babel转化为createElement语法如下：

第二步：再把 createElement 方法执行，创建出virtualDOM虚拟DOM对象

virtualDOM = {
        $$typeof: Symbol(react.element),
        ref: null,
        key: null,
        type: 标签名「或组件」,
        // 存储了元素的相关属性 && 子节点信息
        //字符串：创建一个标签
        //函数名：执行函数，并把props传递给函数
        //类名：把构造函数基于new执行创建一个类的实例，并把props传递过去
        props: {
            元素的相关属性,
            children:子节点信息「没有子节点则没有这个属性、属性值可能是一个值、也可能是一个数组」
        }
      }

打印React.creatElement格式输出虚拟Dom对象：

第三步：执行render函数把构建的virtualDOM渲染为真实DOM

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