react 数据发生变化,页面改变的原理

it2022-05-06  0

数据发生变化,页面改变的原理:

比较虚拟的dom 不怎么损耗性能,真实的dom比较会损耗性能

1.state 数据

2.jsx 模板

3.生成虚拟的dom

3.数据和模板结合,生成虚拟的dom

4.用虚拟的Dom 来生成真实的Dom,来显示

5.state 发生改变

6.数据和模板结合,生成虚拟的dom

7.比较新的虚拟Dom和旧的虚拟Dom,找出差别,改变

8.直接操作Dom,改变内容

 

 

jsx语法 => React.createElement=> 虚拟的Dom =>真实的Dom

<div>

<span></span>

</div>

=

React.createElement('div',{ },React.createElement('span',{}))

 

虚拟Dom 的好处:

性能提升

跨端应用得以实现

 

 

转载于:https://www.cnblogs.com/guangzhou11/p/9798866.html


最新回复(0)