• 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，以提高效率。

  • 相关阅读:
    音视频知识索引
    Java 函数式编程思考 —— 授人以渔
    simple_bypass
    小啊呜产品读书笔记001：《邱岳的产品手记-06》11讲 如何借鉴灵感 & 12讲 产品案例分析：LabRdr的设计实验
    搜维尔科技：Geomagic Touch X力反馈设备【开箱图真机测试】
    Rsync学习笔记1
    【Vs code调试C++】
    EasyNLP 中文文图生成模型带你秒变艺术家
    短视频账号矩阵系统===4年技术源头打磨
    C++之多态＜polymorphism＞
  • 原文地址：https://blog.csdn.net/assokoo123/article/details/127762091