21、React 性能优化：备忘录化技术全解析

React 性能优化：备忘录化技术全解析

在 React 开发中，性能优化是一个至关重要的话题。备忘录化（Memoization）作为一种有效的性能优化手段，可以显著提升应用的响应速度和用户体验。本文将深入探讨 React 中多种备忘录化技术的应用，包括组件备忘录化、部分组件备忘录化、属性备忘录化以及使用 useMemo 和 useCallback 进行值和函数的备忘录化，同时还会介绍 useId 钩子在服务器生成 React 应用中的特殊用途。

1. 组件备忘录化

首先，我们尝试使用从 React 模块导入的 memo() 函数对 Items 组件进行备忘录化。以下是示例代码：

import { memo, useState } from 'react';
const Items = memo(function Items({ items }) {
  return (
    <>
      <h2>Todo items</h2>
      <ul>
        {items.map(todo => <li key={todo}>{todo}</li>)}
      </ul>
    </>
  );
});
function Todo() {
  const [items, setItems] = useState(['Clean gutter', 'Do d