DOM的Diffing算法

# DOM的Diffing算法

# 证明Diffing算法存在

案例：更新页面上的时间

输入框input的内容不会改变，但页面显示的时间会变化，说明只有更新部分发生改变了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好“容器” -->
    <div id="test"></div> <br><br><br>

    <script type="text/javascript" src="../React-js/17.0/react.development.js"></script>
    <script type="text/javascript" src="../React-js/17.0/react-dom.development.js"></script>
    <script type="text/javascript" src="../React-js/babel.min.js"></script>
    <script type="text/javascript" src="../React-js/17.0/prop-types.js"></script>  
    <script type="text/babel">
        class Time extends React.Component {
            state = {date: new Date()}
            componentDidMount(){
                setInterval(() => {
                    this.setState({
                        date: new Date()
                    })
                }, 1000)
            }
            render(){
                return (
                    <div>
                        <h1>hello</h1>
                        <input type="text"/>
                        <span>现在是: {this.state.date.toTimeString()}</span>    
                    </div>
                )
            }
        }

        ReactDOM.render(<Time/>, document.getElementById('test'))
    </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

# key的作用

问法1：react/vue中key的作用？或者说，key的内部原理是什么？

问法2：为什么遍历列表时，key最好不要用index？

虚拟DOM中key的作用
- 简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用
- 详细的说：当状态中的数据发生变化时，React会根据【新数据】生产【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
  1. 旧虚拟DOM中找到了与新虚拟DOM相同的key
    1. 若虚拟DOM中内容没变，直接使用之前的真实DOM
    2. 若虚拟DOM中内容改变，则生产新的真实DOM，随后替换掉页面中之前的真实DOM
  2. 旧虚拟DOM中未找到与新虚拟DOM相同的可以
    - 根据数据创建新的真实DOM，随后渲染到页面
用index作为key可能引发的问题：
1. 若对数据进行逆序添加、逆序删除等破坏顺序操作。会产生没有必要的真实DOM更新，界面没问题，但效率低；
2. 如果结构中包含输入类DOM，会产生错误DOM更新，界面有问题；
3. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅渲染列表用于展示，使用index作为key没有问题
选择key的方式
1. 使用每条数据的唯一标识作为key，如id、手机号、身份证、学号等唯一值。
2. 如果确定只是简单的展示数据，可以使用index

编辑

上次更新: 2023/08/21, 20:05:58

← React组件 React脚手架介绍→