在开发 React 应用程序时，我们经常需要计算一些派生数据，例如从原始数据中筛选、排序或计算某些值。这些计算可以使用计算属性来实现。然而，如果计算属性的计算成本很高，它们可能会导致应用程序变慢。为了避免这种情况，我们可以使用 memoized 计算属性来优化应用程序性能。
什么是 memoized 计算属性？
memoized 计算属性是指在计算属性的值时，将结果缓存起来，以便下一次访问相同的计算属性时，可以直接使用缓存的结果，而不必重新计算。
在 React 中，我们可以使用 useMemo 钩子来实现 memoized 计算属性。useMemo 接受两个参数：一个函数和一个依赖数组。函数返回计算属性的值，依赖数组指定计算属性的依赖项。当依赖数组中的任何一个值发生变化时，useMemo 将重新计算计算属性的值。
如何使用 memoized 计算属性？
假设我们有一个包含许多项目的列表，并且要显示列表中项目的数量。我们可以使用以下代码来计算项目数量：
-- -------------------- ---- -------
-------- ---------- ----- -- -
----- --------- - -------------
------ -
-----
--------- -- ------ ---------------
----
--------------- -- -
--- ------------------------------
---
-----
------
--
-这段代码很简单，但是当列表中的项目数量很大时，计算项目数量的成本可能很高。为了避免这种情况，我们可以使用 useMemo 来缓存计算结果：
-- -------------------- ---- -------
-------- ---------- ----- -- -
----- --------- - ---------- -- ------------- ---------
------ -
-----
--------- -- ------ ---------------
----
--------------- -- -
--- ------------------------------
---
-----
------
--
-在这个例子中，我们将计算 items.length 的函数作为第一个参数传递给 useMemo，并将 items 数组作为第二个参数传递给它。这意味着只有在 items 数组发生变化时，itemCount 才会重新计算。
总结
memoized 计算属性是一种优化 React 应用程序性能的有效方法。通过使用 useMemo 钩子，我们可以缓存计算结果并避免不必要的计算成本。在开发 React 应用程序时，我们应该尽可能地使用 memoized 计算属性来提高应用程序的性能。
示例代码
以下是一个包含 memoized 计算属性的完整示例代码：
-- -------------------- ---- -------
------ ------ - ------- - ---- --------
-------- ---------- ----- -- -
----- --------- - ---------- -- ------------- ---------
------ -
-----
--------- -- ------ ---------------
----
--------------- -- -
--- ------------------------------
---
-----
------
--
-
------ ------- -------- ----- -
----- ----- - -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- --- ----- ----- --- -
--
------ --------- ------------- ---
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655b8d65d2f5e1655d5b083c