ToB企服应用市场:ToB评测及商务社交产业平台
标题:
React@16.x(20)渲染流程-初次渲染
[打印本页]
作者:
钜形不锈钢水箱
时间:
2024-6-11 10:32
标题:
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
类
class Child extends Component {}
console.log(<Child />);
复制代码
函数
function Child() {}
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 节点。
const ele = "text"; // 或 123, null, true 等
console.log(<ele />);
// 数组可以直接渲染
export default class App extends Component {
render() {
return (
<>
123
{true}
{ele}
[1,2,3]
</>
);
}
}
复制代码
注意,节点范例中并不包括平凡对象,
以是平凡对象无法渲染
。
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树:
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树:
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树:
以上。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4