react实现computed
在 React 中实现类似 Vue 的 computed 计算属性功能，可以通过以下几种方式实现：
使用自定义 Hook
创建一个自定义 Hook useComputed，依赖 useMemo 实现计算属性的缓存效果：
import { useMemo } from 'react';
function useComputed(getter, deps) {
return useMemo(getter, deps);
}
// 使用示例
function Component() {
const [count, setCount] = useState(0);
const doubled = useComputed(() => count * 2, [count]);
}基于 useEffect + useState
通过 useEffect 监听依赖项变化并更新计算值：
function useComputed(getter, deps) {
const [value, setValue] = useState(getter());
useEffect(() => {
setValue(getter());
}, deps);
return value;
}类组件实现
在类组件中可以通过 getter 属性实现计算逻辑：
class MyComponent extends React.Component {
get computedValue() {
return this.props.value * 2;
}
render() {
return <div>{this.computedValue}</div>;
}
}第三方库
使用专门的计算属性库如 mobx：
import { computed } from 'mobx';
import { observer } from 'mobx-react';
const store = observable({
count: 1,
get doubled() {
return this.count * 2;
}
});
const Component = observer(() => {
return <div>{store.doubled}</div>;
});性能优化建议
计算属性应避免在每次渲染时重新计算，确保正确声明依赖项数组。对于复杂计算，优先使用 useMemo 方案。
