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

  • 相关阅读:
    一种改进的原子搜索算法-附代码
    一道经典的网红面试题：从URL输入到页面展现到底发生了什么？
    记一次上海更换驾驶证记录
    美团前端vue面试题（边面边更）
    线程的启动和终止
    Java语言高级-03常用API第二部分-第1节Object类
    239.滑动窗口的最大值
    DID：零知识证明的第一个应用试验场
    Redis 官方可视化工具，功能真的强大
    Kubernetes之kubectl命令详解
  • 原文地址：https://blog.csdn.net/assokoo123/article/details/127762091