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

参考

相关推荐
然我3 小时前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
马特说6 小时前
React金融数据分析应用性能优化实战:借助AI辅助解决18万数据量栈溢出Bug
react.js·金融·数据分析
归于尽6 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课6 小时前
React useEffect 详解与运用
前端·react.js
中微子6 小时前
React Props 传值规范详解
前端·react.js
卸任6 小时前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js
LeeAt6 小时前
React Hooks 编程:useState和useEffect的详解
前端·react.js
Dream耀6 小时前
React Hooks 指南:useState 与 useEffect 的用法与技巧
前端·javascript·react.js
我想说一句6 小时前
React Hooks 生存指南:让你的函数组件"活"起来 🧬
前端·javascript·react.js
LeeAt7 小时前
AI单词拍照识别移动端项目(一)
前端·react.js·ai编程