使用 memoized 计算属性优化 React 应用程序性能-JavaScript中文网-JavaScript教程资源分享门户

在开发 React 应用程序时，我们经常需要计算一些派生数据，例如从原始数据中筛选、排序或计算某些值。这些计算可以使用计算属性来实现。然而，如果计算属性的计算成本很高，它们可能会导致应用程序变慢。为了避免这种情况，我们可以使用 memoized 计算属性来优化应用程序性能。

什么是 memoized 计算属性？

memoized 计算属性是指在计算属性的值时，将结果缓存起来，以便下一次访问相同的计算属性时，可以直接使用缓存的结果，而不必重新计算。

在 React 中，我们可以使用 useMemo 钩子来实现 memoized 计算属性。useMemo 接受两个参数：一个函数和一个依赖数组。函数返回计算属性的值，依赖数组指定计算属性的依赖项。当依赖数组中的任何一个值发生变化时，useMemo 将重新计算计算属性的值。

如何使用 memoized 计算属性？

假设我们有一个包含许多项目的列表，并且要显示列表中项目的数量。我们可以使用以下代码来计算项目数量：

// javascriptcn.com 代码示例
function ItemList({ items }) {
  const itemCount = items.length;
  return (
    <div>
      <p>Number of items: {itemCount}</p>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

这段代码很简单，但是当列表中的项目数量很大时，计算项目数量的成本可能很高。为了避免这种情况，我们可以使用 useMemo 来缓存计算结果：

// javascriptcn.com 代码示例
function ItemList({ items }) {
  const itemCount = useMemo(() => items.length, [items]);
  return (
    <div>
      <p>Number of items: {itemCount}</p>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

在这个例子中，我们将计算 items.length 的函数作为第一个参数传递给 useMemo，并将 items 数组作为第二个参数传递给它。这意味着只有在 items 数组发生变化时，itemCount 才会重新计算。

总结

memoized 计算属性是一种优化 React 应用程序性能的有效方法。通过使用 useMemo 钩子，我们可以缓存计算结果并避免不必要的计算成本。在开发 React 应用程序时，我们应该尽可能地使用 memoized 计算属性来提高应用程序的性能。

示例代码

以下是一个包含 memoized 计算属性的完整示例代码：

// javascriptcn.com 代码示例
import React, { useMemo } from "react";

function ItemList({ items }) {
  const itemCount = useMemo(() => items.length, [items]);
  return (
    <div>
      <p>Number of items: {itemCount}</p>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default function App() {
  const items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" },
    { id: 4, name: "Item 4" },
    { id: 5, name: "Item 5" },
    { id: 6, name: "Item 6" },
    { id: 7, name: "Item 7" },
    { id: 8, name: "Item 8" },
    { id: 9, name: "Item 9" },
    { id: 10, name: "Item 10" }
  ];
  return <ItemList items={items} />;
}

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655b8d65d2f5e1655d5b083c