优化 React:理解 DOM Diffing 算法及关键的 key 属性

优化 React:理解 DOM Diffing 算法及关键的 key 属性

DOM 的 Diffing 算法和 Key 的作用

在 React 中,DOM 的 Diffing(差异比较)算法是一种优化手段,用于确定虚拟 DOM 树与实际 DOM 树之间的差异,并仅更新必要的部分,以提高性能。

DOM Diffing 算法的基本原理

React 在进行 Virtual DOM 更新时,会通过 Diffing 算法对新旧 Virtual DOM 进行比较,找出变化并仅更新这部分差异,而不是整个重新渲染。这个算法的基本原理可以概括为:

  1. Tree Reconciliation(树协调): 对比新旧树的结构,找出变化的部分。

  2. Component Reconciliation(组件协调): 对比同一层级的组件,找出需要更新的组件。

Key 的作用

在 React 中,key 是用来帮助 React 识别列表中的每个元素的唯一标识。在下面代码中,使用了 key 属性来标识每个列表项:

jsx 复制代码
{this.state.persons.map(p => <li key={p.id}>姓名: {p.name}  年龄:{p.age}</li>)}

这里的 p.id 就是每个列表项的唯一标识。Key 的作用主要有以下几点:

  1. 唯一性: Key 用于标识每个列表项,确保在列表中的每个元素都有一个唯一的标识。这有助于 React 更准确地识别每个元素,提高 Diffing 算法的效率。

  2. 稳定性: Key 保持稳定,确保相同位置的元素在更新时能够正确匹配,而不是混淆顺序。

用 id 和 index 为 Key 的区别

在代码中,使用了 id 作为每个列表项的 key

jsx 复制代码
{this.state.persons.map(p => <li key={p.id}>姓名: {p.name}  年龄:{p.age}</li>)}

使用 id 作为 Key 通常是比较好的做法,因为 id 具有唯一性,它能够确保每个元素在列表中都有一个独特的标识。

相比之下,使用 index 作为 Key 有一些潜在的问题。如果列表中的元素发生变化,插入或删除元素,index 可能会发生变化,导致 React 难以准确匹配新旧元素,从而降低 Diffing 算法的效率。

完整代码

jsx 复制代码
class Person extends React.Component {
  state = {
    persons: [
      { id: 1, name: 'Judith', age: 19 },
      { id: 2, name: "Jane", age: 18 },
    ],
  }

  add = () => {
    const { persons } = this.state;
    this.setState({
      persons: [
        { id: persons.length + 1, name: '张三', age: 21 },
        ...persons
      ],
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.add}>添加一个张三</button>
        <ul>
          {this.state.persons.map(p => <li key={p.id}>姓名: {p.name}  年龄:{p.age}</li>)}
        </ul>
      </div>
    );
  }
}

总体而言,尽量使用具有稳定唯一性的标识作为 Key,以确保 React 能够正确而高效地进行差异比较。

参考

相关推荐
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
当牛作馬12 小时前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
hxmmm13 小时前
react合成事件
react.js
然我15 小时前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
光影少年15 小时前
react16-react19都更新哪些内容?
前端·react.js
小陈phd16 小时前
langchain从入门到精通(四十一)——基于ReACT架构的Agent智能体设计与实现
react.js·架构·langchain
16年上任的CTO16 小时前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key