React 18 中可以使用 useMemo hook 来实现类似 Vue 3 computed 的效果。以下是一些实现方法:
- 使用 useMemo 实现基本的计算属性:
typescript
import { useMemo } from 'react';
function MyComponent({ a, b }) {
const sum = useMemo(() => a + b, [a, b]);
return <div>Sum: {sum}</div>;
}
- 对于复杂的计算,可以将逻辑封装在一个函数中:
typescript
import { useMemo } from 'react';
function MyComponent({ items }) {
const totalPrice = useMemo(() => {
return items.reduce((total, item) => total + item.price, 0);
}, [items]);
return <div>Total Price: {totalPrice}</div>;
}
- 如果计算依赖于多个状态,可以将它们组合在一个对象中:
typescript
import { useMemo } from 'react';
function MyComponent({ user, products }) {
const userProductInfo = useMemo(() => {
return {
name: user.name,
totalPurchases: products.filter(p => p.userId === user.id).length
};
}, [user, products]);
return (
<div>
<p>User: {userProductInfo.name}</p>
<p>Total Purchases: {userProductInfo.totalPurchases}</p>
</div>
);
}
- 对于需要频繁更新的计算属性,可以结合使用 useCallback:
typescript
import { useMemo, useCallback } from 'react';
function MyComponent({ data }) {
const processedData = useMemo(() => {
// 复杂的数据处理逻辑
return data.map(item => ({ ...item, processed: true }));
}, [data]);
const getItemById = useCallback((id) => {
return processedData.find(item => item.id === id);
}, [processedData]);
return (
<div>
{/* 使用 processedData 和 getItemById */}
</div>
);
}
使用 useMemo 可以确保只有在依赖项发生变化时才重新计算值,从而优化性能。这与 Vue 3 的 computed 属性类似,都是用于缓存计算结果并在依赖更新时重新计算。
需要注意的是,不要过度使用 useMemo,因为它也会增加内存使用。只在计算成本较高或者需要避免不必要的重渲染时使用它。
Citations:
[1] https://blog.logrocket.com/vue-3-react-developers-side-by-side-comparison-demos/
[2] https://stackoverflow.com/questions/73523864/best-way-to-replace-computed-properties-of-vue-in-react