## :-: 渲染原理 **渲染：生成用于显示的对象，以及将这些对象形成真实的DOM对象。** - React元素：React Element，通过`React.createElement()`创建(语法糖：jsx) - React节点：专门用于渲染到UI界面的对象。通过React元素，创建React节点 React节点类型： - React DOM节点：创建该元素的React元素类型是一个字符串。 - React 组件节点：创建该节点的React元素类型是函数或者类。 - React 文本节点(TextNode)：由字符串创建。 - React 空节点：null、undefinged、false、true - React 数组节点：该节点是由一个数组创建的。 真实DOM：通过`document.createElement()`创建的dom元素。 ### :-: 首次渲染(新节点渲染) - 通过参数的值创建节点 - 根据不同的节点，做不同的事情。 - 文本节点：通过`document.createTextNode()`创建真实的文本节点。 - 空节点：什么都不做 - 数组节点：遍历数组，将数组中的每一项递归创建节点 - DOM节点：通过`document.createElement()`创建真实的DOM对象， 然后立刻设置该真实DOM元素的各种属性，然后遍历该对应React元素的children属性，递归操作。 - 组件节点：1.函数组件：调用函数返回值生成节点。2.类组件：创建实例，调用对象的生命周期方法，运行render方法拿到节点对象。 - 会生成虚拟DOM树，然后将树形结构保存起来，以便后续使用。 - 将之前生成的真实DOM对象，插入到容器中。