react基本原理---虚拟DOM和Diff算法_react虚拟dom diff算法原理

React 更新视图的思想是：只要state 变化就重新渲染视图

特点：思路非常清晰

问题：组件中只有一个DOM 元素需要更新时，也得把整个组件的内容重新渲染到页面中？ 不是

理想状态：部分更新，只更新变化的地方。

问题：React 是如何做到部分更新的？ 虚拟 DOM 配合 Diff 算法

=========================================================================

什么是虚拟dom？

虚拟 DOM：本质上就是一个JS 对象，用来描述你希望在屏幕上看到的内容（UI）。

=========================================================================

执行过程：

1. 初次渲染时，React 会根据初始state（Model），创建一个虚拟DOM 对象（树）。
2. 根据虚拟 DOM 生成真正的DOM，渲染到页面中。
3. 当数据变化后（setState()），重新根据新的数据，创建新的虚拟DOM对象（树）。
4. 与上一次得到的虚拟DOM 对象，使用 Diff 算法 对比（找不同），得到需要更新的内容。
5. 最终，React 只将变化的内容更新（patch）到DOM 中，重新渲染到页面。
   
   

reder方法调用并不意味着浏览器的重新渲染，而render方法调用仅仅说明要去diff了

reder方法一调用并不是去对dom进行了一个更新，而是去进行diff了，diff进行虚拟dom的对比，然后定位到变化的dom，只更新变化的dom

import React from "react";
import ReactDOM from "react-dom";

// 虚拟dom和diff算法
class App extends React.PureComponent {
  state = {
    number: 0
  };
handleClick = () => {
    
    this.setState(()=>{
        return {
           number: Math.floor(Math.random()*3)
        }
    })
}
  render() {
      console.log("更新")
      const el = (
        <div>
          <h1>计数器:{this.state.number}</h1>
          <button onClick={this.handleClick}>+1</button>
        </div>
      );
      console.log(el)
      return el
  }
}
ReactDOM.render(<App />, document.getElementById("root"));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29