React hooks 是在 React 16.8 版本中引入的新特性，它提供了一种基于函数式组件的方式来处理组件的状态和生命周期方法，从而使得编写 React 组件变得更加简单和优雅。其中的 useMemo 也是 React hooks 中的一个重要 API，它可以用于实现计算属性，本文将详细介绍其使用方法和指导意义。
什么是计算属性？
计算属性（Computed Property）在前端开发中非常常见，它是一个由其他属性计算得出的新属性。在 React 组件中，如果我们需要根据某个或某些状态计算出一个新的值，并将这个值作为组件的渲染结果之一，那么我们就可以将这个属性定义为计算属性。
例如，假设我们有一个商品列表组件，它的渲染结果包括商品列表数据和商品列表的总价。我们可以通过传递商品列表数据和商品价格信息作为组件的 props 来实现，但是如果我们希望在组件内部实现商品列表总价的计算，那么就需要定义一个计算属性。
什么是 useMemo？
useMemo 是 React hooks 中的一个函数，它的作用是在组件的渲染过程中进行一些计算，然后返回一个值，这个值会被缓存起来。当这个值的依赖发生变化时，useMemo 会重新计算这个值，并且缓存这个新值。
useMemo 接受一个计算函数和一个依赖数组作为参数，计算函数的返回值就是被 useMemo 缓存的值。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
在这个例子中，我们传递了一个计算函数 computeExpensiveValue 和一个依赖数组 [a, b] 给 useMemo。如果 a 或 b 的值发生了变化，useMemo 会重新计算 computedExpensiveValue(a, b) 的值，并且返回这个新值。如果 a 或 b 的值没有发生变化，useMemo 就会直接返回上一次缓存的值。
注意，useMemo 的计算函数一定要是纯函数，也就是说，它的返回值只能由参数决定，而无法受到其他外部变量的影响。
用 useMemo 实现计算属性
了解了计算属性和 useMemo 的概念后，我们可以使用 useMemo 来实现组件内部的计算属性。具体来说，我们可以通过 useMemo 的缓存机制，避免在每次组件渲染时都重新计算计算属性的值，从而优化组件的性能。
下面是一个使用 useMemo 实现计算属性的示例代码：
// javascriptcn.com 代码示例
import React, { useState, useMemo } from 'react';
function ProductList({ products }) {
const [selected, setSelected] = useState([]);
const totalPrice = useMemo(() => {
return selected.reduce((total, product) => {
return total + product.price;
}, 0);
}, [selected]);
const handleToggle = (product) => {
setSelected(
selected.includes(product)
? selected.filter((p) => p !== product)
: [...selected, product]
);
};
return (
<div>
{products.map((product) => (
<div key={product.id}>
<label>
<input
type="checkbox"
checked={selected.includes(product)}
onChange={() => handleToggle(product)}
/>
{product.name} - ${product.price}
</label>
</div>
))}
<div>Total price: ${totalPrice}</div>
</div>
);
}
export default ProductList;在这个例子中，我们定义了一个 ProductList 组件，它接受一个包含商品信息的数组作为 props。组件的渲染结果包括商品列表和商品的总价。在组件内部，我们使用 useState hooks 来定义一个选中商品的状态 selected，并使用 useMemo 来计算选中的商品的总价。
计算函数中通过使用 reduce 方法，将选中的商品的价格相加，从而得到商品的总价。同时，我们将 selected 数组作为依赖数组传递给 useMemo，这样当 selected 发生变化时，我们就会重新计算 totalPrice 的值，并且缓存这个新值。这样在组件重新渲染时，我们就不需要重新计算商品总价，从而提高了组件的性能。
总结
在本文中，我们详细介绍了 React hooks 中的 useMemo API，并且演示了如何使用 useMemo 实现计算属性。通过使用 useMemo，我们可以优化 React 组件的性能，避免不必要的计算，提高组件的渲染速度和用户体验。
需要注意的是，在使用 useMemo 时，我们一定要确保计算函数是纯函数，并且依赖数组中的所有变量都是可比较的，这样才能保证我们的计算能够被正确缓存。同时，在使用计算属性时，我们也应该权衡计算的复杂度和渲染的性能，从而做出合理的选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6539bf4a7d4982a6eb33a2f7