React@16.x（20）渲染流程-初次渲染
1，渲染的前置知识点渲染：将 React 元素生成特定对象，并通过这些对象生成真实 DOM 对象，参加到容器中。
1.1，React 元素
1，通过 React.createElement() 创建，JSX 是它的语法糖。
[*]<div></div>
[*]<App />
2，它有一个 type 属性，用于标记范例。
常见范例举例：
const ele = <div></div>;
console.log(ele);
平凡 DOM
https://img-blog.csdnimg.cn/direct/160612f35d634b89847a07df33d0b15e.png
类
class Child extends Component {}
console.log(<Child />);
https://img-blog.csdnimg.cn/direct/b2c431ced2be46cfbb997a0062ebe2eb.png
函数
function Child() {}
console.log(<Child />);
https://img-blog.csdnimg.cn/direct/d6814d7842a34b349f6e0183fa5fe27c.png
1.2，React 节点
专门用于渲染到页面的特定对象，
[*]通过React 元素创建；
[*]ReactDOM 通过它来举行渲染。
1.3，节点范例
下面这些都是 React 自己创建的节点范例：
[*]DOM 节点，创建该节点的 React 元素范例 是一个字符串。
[*]组件（Composite）节点，创建该节点的 React 元素范例是一个函数或类。
[*]文本（Text）节点，由字符串，数字创建。
[*]空（Empty）节点，由 null，undefined，false，true 创建。
[*]数组节点，由一个数组创建。
举例：
1和2已经有例子了，不多赘述。
3，4，5说的【创建】是指通过 React 元素创建，也就是说字符串，数字，null 等也都会被创建为 React 元素，再创建 React 节点。
const ele = "text"; // 或 123, null, true 等
console.log(<ele />);
// 数组可以直接渲染
export default class App extends Component {
render() {
return (
<>
123
{true}
{ele}
</>
);
}
}
注意，节点范例中并不包括平凡对象，以是平凡对象无法渲染。
1.4，真实DOM
通过 document.createElement() 创建的 DOM 元素。
2，初次渲染
在 ReactDOM.render(参数1, 参数2) 的过程中，React 内部会将React 元素（参数1）先转为 React 节点，再举行渲染（挂载到参数2）。
2.1，根据参数创建节点
参数指 ReactDOM.render() 的第一个参数：
ReactDOM.render(app, document.getElementById('root'));
2.2，差别节点，有差别处置处罚
[*]文本节点：通过 document.createTextNode() 创建真实的文本节点。
[*]空节点：无事发生（但节点存在）。
[*]DOM节点：通过 document.createElement() 创建真实DOM对象，接着立即设置该真实DOM元素的各种属性（属性在 props 中），然后遍历对应 React 元素的 children 属性，举行递归操纵（回到第1步）。
[*]数组节点：遍历数组，对数组的元素创建节点，并举行递归操纵（回到第1步）。
[*]组件节点：
[*]函数组件：调用该函数（函数必须返回可以生成节点的内容），将函数返回的结果举行递归操纵（回到第1步）
[*]类组件：
[*]创建类的实例；
[*]调用类的生命周期方法 static getDerivedStateFromProps() ；
[*]调用组件的 render 方法，得到节点对象举行递归操纵（回到第1步）；
[*]将组件的生命周期方法 componentDidMount() 参加到执行队列（先进先出）。当整个虚拟DOM树构建完成，并将真实DOM对象参加到容器之后，执行该队列。
结合类组件的第3步和第4步。可以得到父子组件生命周期的执行次序：
父 getDerivedStateFromProps --> 父 render -->
子getDerivedStateFromProps --> 子 render ->
子componentDidMount() --> 父 componentDidMount()。
2.3，生成虚拟DOM树
对节点处置处罚后，会生成整个虚拟DOM树，同时节点对应的真实DOM也生成了。
React 会将虚拟DOM树生存起来，后续更新时会举行对比。
2.4，将生成的真实DOM对象，参加到容器中
ReactDOM.render() 的第2个参数就是容器，通过 appendChild() 方法将生成的真实DOM对象，参加容器中。
ReactDOM.render(app, document.getElementById('root'));
3，部分举例说明
3.1
const app = <div className="assaf">
<h1>
标题
{["abc", null, <p>段落</p>]}
</h1>
<p>
{undefined}
</p>
</div>;
ReactDOM.render(app, document.getElementById('root'));
得到的虚拟DOM树：
https://img-blog.csdnimg.cn/direct/03f4c61479bc457382be7849626ff2bc.png 3.2
function Comp1(props) {
return <h1>Comp1 {props.n}</h1>
}
function App(props) {
return (
<div>
<Comp1 n={5} />
</div>
)
}
const app = <App />;
ReactDOM.render(app, document.getElementById('root'));
得到的虚拟DOM树：
https://img-blog.csdnimg.cn/direct/9216a9e294664df482d1bba7b08c7bdb.png 3.3
class Comp1 extends React.Component {
render() {
return (
<h1>Comp1</h1>
)
}
}
class App extends React.Component {
render() {
return (
<div>
<Comp1 />
</div>
)
}
}
const app = <App />;
ReactDOM.render(app, document.getElementById('root'));
得到的虚拟DOM树：
https://img-blog.csdnimg.cn/direct/382f0f8047ab427a99b7d955867b134c.png 以上。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]