优化 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 能够正确而高效地进行差异比较。

参考

相关推荐
im_AMBER5 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界6 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
今天头发还在吗10 小时前
React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案
前端·react.js·前端框架·ant design
sjin15 小时前
React源码 - 关键数据结构
前端·react.js
IT小哥哥呀15 小时前
论文见解:REACT:在语言模型中协同推理和行动
前端·人工智能·react.js·语言模型
古茗前端团队15 小时前
小程序 Galacean Effect实践
react.js
JamSlade16 小时前
react 无限画布难点和实现
前端·react.js
Cxiaomu16 小时前
React Native 项目中 WebSocket 的完整实现方案
websocket·react native·react.js
im_AMBER16 小时前
React 02
前端·笔记·学习·react.js·前端框架
鹏多多17 小时前
React动画方案对比:CSS动画和Framer Motion和React Spring
前端·javascript·react.js