React 入门：简单验证 Diffing 算法

Diffing 算法是 React DOM 高效渲染的很关键的概念。

下面通过一个简单的代码示例来简单验证一下 Diffing 算法。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>简单验证 Diffing 算法</title>
</head>

<body>
  <!-- 准备好一个容器 -->
  <div id="app"></div>

  <!-- step01: 引入react核心库 -->
  <script type="text/javascript" src="../js/17/react.development.js"></script>
  <!-- step02: 引入react-dom，用于支持react操作DOM -->
  <script type="text/javascript" src="../js/17/react-dom.development.js"></script>
  <!-- step03: 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel"> /* 此处一定要写babel */

        class Time extends React.Component {

          state = {date: new Date()}

          componentDidMount() {
            setInterval(() => {
              this.setState({
                date: new Date()
              })
            }, 1000)
          }

          render() {
            return (
              <div style={{border:"1px solid #999",padding: "20px", width: "400px", margin: "20px auto"}}>
                <h1>显示时间</h1>
                <input type="text"/><br/><br/>
                <span>现在是：{this.state.date.toTimeString()}</span>
              </div>
            )
          }
        }

        ReactDOM.render(<Time/>, document.getElementById('app'));
    </script>

</body>

</html>
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

运行结果：
在这里插入图片描述

上面的代码中创建了一个 Time 的组件，该组件中包含 3 个元素: h1、input、span ，其中 span 标签的内容渲染了 state 的内容。

组件挂载完毕后，启动了定时器，每秒更新 state 的数据。

state 的更新会导致组件 DOM 的重新渲染。

那么怎么证明 Diffing 算法呢？

其实很简单，就是在输入框内输入内容，如果 span 内的时间每秒更新时，如果输入框的内容不消失，证明 input 没有重新渲染。

同一个组件在一次渲染中，组件的一部分 DOM 渲染，另一部分 DOM 没有重新渲染，就是 Diffing 算法的体现。

简单总结一下，Diffing 算法就是 React DOM 渲染过程中，通过 key 对比更新前后虚拟 DOM 节点的内容，对于内容改变了的虚拟 DOM 节点会重新渲染为真实的 DOM 节点，对于内容没有改变的节点则不会重新渲染，还是使用之前的真实 DOM，以提高效率。

相关阅读:
关于是我的精灵问题还是代码还是动画的问题！
汇编-在VisualStudio调试器中显示数组
【海浪建模3】三维随机真实海浪建模以及海浪发电机建模matlab仿真
原论文一比一复现 | 更换 RT-DETR 主干网络为【VGG13】【VGG16】【VGG19】| 对比实验必备
MMDetection安装流程与测试
k8s.7-Kubernetes集群UI及主机资源监控
WebGL 同时使用多幅纹理
CS5801|替代LT6711A|HDMI转DP转接线方案|HDMI转DP带供电芯片方案
90.（cesium篇）cesium高度监听事件
本地项目上传GitLab

原文地址：https://blog.csdn.net/assokoo123/article/details/127762091