优化 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 属性来标识每个列表项：

{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：

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

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

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

完整代码

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

参考

• 优化 React：理解 DOM Diffing 算法及关键的 key 属性
• 完整代码