react实现计算属性
计算属性的概念
计算属性指根据已有状态（state）或属性（props）动态计算出的衍生值，通常用于避免重复计算或保持代码逻辑清晰。React 本身没有类似 Vue 的计算属性机制，但可以通过多种方式实现类似功能。
使用 useMemo Hook
useMemo 是 React 提供的性能优化 Hook，适合缓存计算结果：
import React, { useState, useMemo } from 'react';
function Example() {
const [count, setCount] = useState(0);
const doubledCount = useMemo(() => {
return count * 2;
}, [count]); // 依赖项变化时重新计算
return (
<div>
<p>Count: {count}</p>
<p>Doubled: {doubledCount}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}使用 getter 方法
通过类组件的 getter 实现计算属性：
class Example extends React.Component {
state = { count: 0 };
get doubledCount() {
return this.state.count * 2;
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<p>Doubled: {this.doubledCount}</p>
</div>
);
}
}自定义 Hook 封装
对于复杂场景可封装自定义 Hook：
function useComputed(computeFn, deps) {
const [value, setValue] = useState(() => computeFn());
useEffect(() => {
setValue(computeFn());
}, deps);
return value;
}
// 使用示例
const result = useComputed(() => expensiveCalculation(a, b), [a, b]);派生状态处理
对于从 props 派生的状态，建议直接计算而非存储：
function Component({ items }) {
const total = items.reduce((sum, item) => sum + item.price, 0);
return <div>Total: {total}</div>;
}性能注意事项
- 简单计算无需
useMemo，直接内联计算即可 - 复杂计算或大型数据集推荐使用
useMemo避免重复渲染开销 - 确保依赖项数组包含所有计算依赖的变量
