React DOM Diff算法

2023-01-12 14:45:10 浏览数 (1)

这是我参与8月更文挑战的第24天，活动详情查看:8月更文挑战 首先上一段代码

代码语言：javascript复制
class Time extends React.Component{
    state = {date:new Date()}
    componentDidMount(){
        setInterval(()=>{
            this.setState({
                date:new Date()
            })
        },1000)
    }
    render(){
        return(
            <div>
                <h1>Hello</h1>
                <input/>
                <span>现在是 {this.state.date.toTimeString()}</span>
            </div>
        )
    }
}
ReactDOM.render(<Time/>, document.getElementById('root'))

时间在更新，每次更新，虚拟DOM就会进行对比，如果对比出不同，才会重新渲染真实DOM。对比的最小粒度是：标签。（最小粒度：买房只能买一套，而不能买一平米。那么一套房就是房子的最小粒度）

<h1>标签没有变化。 <input/>标签也没有变化。而 <span>标签变化了。

问题1:验证 <input/>标签没有重新渲染真实DOM

我们在输入框中输入内容，如果它的DOM是每一秒都在重新渲染的，那么这个值是留不住的。

但是，如图，它的值留住了。所以说用的还是之前的真实DOM。

问题2: <span>标签中的文字重新渲染了吗？

重新渲染了。

问题3: <span>标签中加入一个 <input>标签会重新渲染吗？

代码语言：javascript复制
 <span>
       现在是 {this.state.date.toTimeString()}
        <input/>
 </span>

如图：可以发现输入框中的内容并没有丢失。刚才不是说整个 <span>标签都会重新渲染吗？那么为什么呢？DIff算法逐层对比。

react/vue中遍历的key有什么作用？ 我们来实现个例子，点击添加按钮在列表中添加一个小王。遍历的key我们使用索引

代码语言：javascript复制
class Person extends React.Component{
    state = {
        persons:[
            {id:1,name:'xiao zhang',age:18},
            {id:2,name:'xiao li',age:19}
        ]
    }
    add = ()=>{
        const {persons} = this.state
        const p = {id:persons.length 1,name:'xiao wang',age:20}
        this.setState({persons:[p,...persons]})
    }
    render(){
        return(
            <div>
                <button onClick={this.add}>添加一个小王</button>
                {
                    this.state.persons.map((personObj,index)=>{
                        return <li key={index}>{personObj.name}---{personObj.age}</li>
                    })
                }
                
            </div>
        )
    }
}
ReactDOM.render(<Person/>, document.getElementById('root'))

如图确实实现了我们想要的效果。

虚拟DOM中key的作用

1.简单的说：

key是虚拟DOM对象的标识，在更新时key起到了极其重要的作用。

2.详细的说：

当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较。

比较规则如下：

a). 旧虚拟DOM中找到了跟新虚拟DOM相同的key：

代码语言：javascript复制
    1）若虚拟DOM内容没变，直接使用之前的真实DOM
    2）若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

b).旧虚拟DOM中未找到与新虚拟DOM相同的key 根据数据创建新的真实DOM，随后渲染到页面。

还原一下上面的例子

代码语言：javascript复制
初始数据：
          {id:1,name:'xiao zhang',age:18},
          {id:2,name:'xiao li',age:19}	
          
初始的虚拟DOM：
        <li key=0>xiao zhang --- 18</li>
        <li key=1>xiao li --- 19</li>
更新后的数据：
        {id:3,name:'xiao wang',age:20},
         {id:1,name:'xiao zhang',age:18},
        {id:2,name:'xiao li',age:19}	
更新后的虚拟DOM：
        <li key=0>xiao wang --- 20</li>
        <li key=1>xiao zhang --- 18</li>
        <li key=2>xiao li --- 19</li>

新的虚拟DOM开始与旧的虚拟DOM进行比较，首先是key为0的，对比后发现不相同了。按照上面的规则，会生成新的真实DOM，替换掉之前的真实DOM。再向下对比第二个还是同样的，对比第三个，没有key是2的，按照规则也会生成一个新的真实DOM。

明明有两个真实DOM是不需要重新渲染的，但是由于index作为key，使其进行了没有必要的真实DOM更新。如果有2000条数据，并且还是向前方加，那么使用index作为key，会造成2001次的重新渲染。

不要使用index作为key

因此最好不要使用index作为key，最好使用唯一标识 id 作为key

使用index作为key，可能会引发的问题

  • 若对数据进行：逆序添加、逆序删除等破坏顺序的操作，会产生没有必要的真实DOM更新 ==>界面效果没问题，但是效率低
  • 如果结构中还包含输入类的DOM，会产生错误DOM更新 ==>界面有问题
  • 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅仅用于展示，使用index是没有问题的。
渲染 react 编程算法

0 人点赞