React@16.x（20）渲染流程-初次渲染

1，渲染的前置知识点

渲染：将 React 元素生成特定对象，并通过这些对象生成真实 DOM 对象，参加到容器中。
1.1，React 元素

1，通过 React.createElement() 创建，JSX 是它的语法糖。

• <div></div>
  
• <App />
  

2，它有一个 type 属性，用于标记范例。
常见范例举例：

1. const ele = <div></div>;
2. console.log(ele);

复制代码

平凡 DOM

类

1. class Child extends Component {}
2. console.log(<Child />);

复制代码

函数

1. function Child() {}
2. console.log(<Child />);

复制代码

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 节点。

1. const ele = "text"; // 或 123, null, true 等
2. console.log(<ele />);
4. // 数组可以直接渲染
5. export default class App extends Component {
6.     render() {
7.         return (
8.             <>
9.                 123
10.                 {true}
11.                 {ele}
12.                 [1,2,3]
13.             </>
14.         );
15.     }
16. }

复制代码

注意，节点范例中并不包括平凡对象，以是平凡对象无法渲染。
1.4，真实DOM

通过 document.createElement() 创建的 DOM 元素。
2，初次渲染

在 ReactDOM.render(参数1, 参数2) 的过程中，React 内部会将React 元素（参数1）先转为 React 节点，再举行渲染（挂载到参数2）。
2.1，根据参数创建节点

参数指 ReactDOM.render() 的第一个参数：

1. 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对象，参加容器中。

1. ReactDOM.render(app, document.getElementById('root'));

复制代码

3，部分举例说明

3.1

1. const app = <div className="assaf">
2.     <h1>
3.         标题
4.         {["abc", null, <p>段落</p>]}
5.     </h1>
6.     <p>
7.         {undefined}
8.     </p>
9. </div>;
10. ReactDOM.render(app, document.getElementById('root'));

复制代码

得到的虚拟DOM树：

3.2

1. function Comp1(props) {
2.     return <h1>Comp1 {props.n}</h1>
3. }
5. function App(props) {
6.     return (
7.         <div>
8.             <Comp1 n={5} />
9.         </div>
10.     )
11. }
13. const app = <App />;
14. ReactDOM.render(app, document.getElementById('root'));

复制代码

得到的虚拟DOM树：

3.3

1. class Comp1 extends React.Component {
2.     render() {
3.         return (
4.             <h1>Comp1</h1>
5.         )
6.     }
7. }
9. class App extends React.Component {
10.     render() {
11.         return (
12.             <div>
13.                 <Comp1 />
14.             </div>
15.         )
16.     }
17. }
19. const app = <App />;
20. ReactDOM.render(app, document.getElementById('root'));

复制代码

得到的虚拟DOM树：

---

以上。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。