React Hooks：利用不变性优化性能和 UI 一致性

2024-01-16 19:33:36

从不变性角度理解 React Hooks

处于 tuple 和 record 进入 stage2 的时刻，恰逢本人将搁置半年的草稿拿出来更新。对于功能较为复杂的 React 单页应用，我们需要重点关注其性能和 UI 一致性，而这两个问题与 React 的重渲染机制密切相关。本文将着重探讨如何控制重渲染，以此解决 React 中性能和一致性问题。

React 中的渲染机制

React 的渲染机制遵循虚拟 DOM 的概念，即维护一个与实际 DOM 结构相对应的虚拟 DOM 树。当组件的状态或属性发生变化时，React 会对比新旧虚拟 DOM 树，计算出需要更新的部分，并只更新必要的 DOM 节点，以提高渲染效率。

然而，如果组件中包含复杂的数据结构或函数，如数组、对象或自定义钩子，每次状态更新都会触发这些数据的重新创建，导致不必要的性能开销。为了解决这一问题，React 引入了**不变性** 的概念。

不变性与 React Hooks

在 React 中，不变性意味着组件的状态和属性在整个生命周期内保持不变。这意味着:

状态和属性不得被直接修改。 而是使用 React 提供的 setState() 和 useReducer() 等方法进行更新。
数组和对象不得被直接修改。 而是使用 concat()、slice() 和 spread 运算符等方法创建新数组或对象。
函数不得被重新声明。 如果需要使用新函数，则创建一个新的函数引用。

为什么要使用不变性

强制使用不变性可以带来以下好处:

提高性能。 通过防止不必要的重新创建，不变性可以显著提高组件的渲染速度。
增强 UI 一致性。 不变性有助于确保组件在不同渲染之间保持一致的外观和行为，避免因意外状态更改导致的 UI 闪烁或错误。
简化调试。 不变性使跟踪组件状态的变化变得更加容易，从而简化了调试过程。

如何实现不变性

在 React 中实现不变性有多种方法:

使用 setState() 和 useReducer() 更新状态。 这两种方法确保以受控的方式更新组件状态，从而保持不变性。
使用 concat()、slice() 和 spread 运算符更新数组和对象。 这些方法创建新数组或对象的副本，而不会修改原有数据。
使用 useMemo() 和 useCallback() 缓存函数。 这些钩子可防止在每次渲染时重新创建函数，从而提高性能。

实践案例

以下是一个实践案例，展示了如何使用不变性来优化 React 组件:

import React, { useState } from "react";

const MyComponent = () => {
  const [list, setList] = useState([]);

  const addItem = () => {
    // 使用 spread 运算符创建新数组，保持不变性
    setList([...list, "new item"]);
  };

  return (
    <div>
      <ul>
        {list.map((item) => <li key={item}>{item}</li>)}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
};

export default MyComponent;