当前位置：首页 > React

react计算属性实现

2026-01-27 07:32:52React

实现计算属性的方法

在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适合复杂组件，第三方库则提供更强大的响应式能力。

react计算属性实现