react 數據發生變化，頁面改變的原理

數據發生變化，頁面改變的原理：

比較虛擬的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 的好處：

性能提升

跨端應用得以實現