react计算属性实现
实现计算属性的方法
在React中，可以通过以下几种方式实现类似Vue的计算属性功能：
使用useMemo Hook
useMemo是React提供的用于缓存计算结果的Hook，适合在函数组件中使用：
import React, { useMemo } from 'react';
function MyComponent({ a, b }) {
const computedValue = useMemo(() => {
return a + b;
}, [a, b]);
return <div>{computedValue}</div>;
}使用useCallback Hook
当计算结果是函数时，可以使用useCallback：
import React, { useCallback } from 'react';
function MyComponent({ a, b }) {
const computedFunction = useCallback(() => {
return a + b;
}, [a, b]);
return <button onClick={() => console.log(computedFunction())}>Click</button>;
}类组件中的getter
在类组件中可以直接使用getter实现计算属性：
class MyComponent extends React.Component {
get computedValue() {
return this.props.a + this.props.b;
}
render() {
return <div>{this.computedValue}</div>;
}
}自定义Hook封装
可以创建自定义Hook来复用计算逻辑：
function useComputedValue(a, b) {
return useMemo(() => a + b, [a, b]);
}
function MyComponent({ a, b }) {
const sum = useComputedValue(a, b);
return <div>{sum}</div>;
}第三方库解决方案
一些状态管理库如MobX提供了更完善的计算属性支持：
import { observer } from "mobx-react-lite";
import { observable, computed } from "mobx";
class Store {
@observable a = 1;
@observable b = 2;
@computed get sum() {
return this.a + this.b;
}
}
const MyComponent = observer(({ store }) => {
return <div>{store.sum}</div>;
});每种方法都有其适用场景，useMemo适合大多数简单计算，类组件getter适合复杂组件，第三方库则提供更强大的响应式能力。
