React Native中实现Vue computed properties或Svelte reactive declarations的最优方案

React Native 基于 React 响应式原理，和 Vue、Svelte 的响应式模型有底层差异，对应实现可以按项目复杂度选两种方案：

1. 无额外依赖的通用最优解：useMemo Hook #

如果是函数组件的普通计算场景，直接用 React 原生自带的 useMemo 就能实现完全等价的效果，不需要引入任何第三方库：

• 只有依赖的响应式状态变更时才会重新计算值，和 Vue computed、Svelte 响应式声明的触发逻辑完全一致
• 语法简单，心智负担低，是90%场景下的首选方案

示例代码：

import { useState, useMemo } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const GoodsCard = () => {
  const [count, setCount] = useState(1);
  const [unitPrice, setUnitPrice] = useState(89);
  const [discount, setDiscount] = useState(0.8);

  // 等价于Vue computed / Svelte reactive declaration
  const finalPrice = useMemo(() => {
    // 可以写任意复杂的计算逻辑
    return (count * unitPrice * discount).toFixed(2);
  }, [count, unitPrice, discount]); // 依赖数组，只有数组内的状态变更才会重新计算

  return (
    <View>
      <Text>单价：{unitPrice}元</Text>
      <Text>数量：{count}</Text>
      <Text>实付：{finalPrice}元</Text>
      <TouchableOpacity onPress={() => setCount(count + 1)}>
        <Text>加购</Text>
      </TouchableOpacity>
    </View>
  )
}

注意事项：

• 依赖数组必须包含所有计算逻辑里用到的响应式变量，漏写会导致计算值不更新
• 如果是加减、字符串拼接这类极低计算成本的逻辑，甚至可以不用useMemo，直接写在渲染逻辑里即可，React 重渲染的性能开销远小于手动维护useMemo的心智成本

2. 复杂响应式场景方案：Mobx 派生值 #

如果是中大型项目，存在大量跨组件共享的复杂计算、多层状态依赖的场景，可以用 Mobx 的派生值实现，开发体验更贴近 Vue、Svelte 的原生响应式写法，不需要手动维护依赖数组：

• 自动收集响应式依赖，依赖变更自动触发计算值更新
• 支持跨组件共享计算属性，适合复杂状态管理场景

示例代码：

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';
import { View, Text, Button } from 'react-native';

// 全局状态store
class ShopStore {
  count = 1;
  unitPrice = 89;
  discount = 0.8;

  constructor() {
    makeAutoObservable(this);
  }

  // 派生值，自动收集依赖，等价于computed
  get finalPrice() {
    return (this.count * this.unitPrice * this.discount).toFixed(2);
  }

  addCount = () => {
    this.count += 1;
  }
}

const shopStore = new ShopStore();

// 用observer包裹组件，响应状态变更
const ShopCard = observer(() => {
  return (
    <View>
      <Text>单价：{shopStore.unitPrice}元</Text>
      <Text>数量：{shopStore.count}</Text>
      <Text>实付：{shopStore.finalPrice}元</Text>
      <Button title="加购" onPress={shopStore.addCount} />
    </View>
  )
})

方案选择建议 #

• 小型项目、简单计算场景：优先选原生useMemo，无额外依赖，维护成本最低
• 中大型项目、大量复杂响应式计算需求：优先选Mobx派生值，开发效率更高

内容的提问来源于stack exchange，提问作者Kunta Kinte