React18 怎么实现 vue3 computed 的效果

React 18 中可以使用 useMemo hook 来实现类似 Vue 3 computed 的效果。以下是一些实现方法:

  1. 使用 useMemo 实现基本的计算属性:
typescript 复制代码
import { useMemo } from 'react';

function MyComponent({ a, b }) {
  const sum = useMemo(() => a + b, [a, b]);

  return <div>Sum: {sum}</div>;
}
  1. 对于复杂的计算,可以将逻辑封装在一个函数中:
typescript 复制代码
import { useMemo } from 'react';

function MyComponent({ items }) {
  const totalPrice = useMemo(() => {
    return items.reduce((total, item) => total + item.price, 0);
  }, [items]);

  return <div>Total Price: {totalPrice}</div>;
}
  1. 如果计算依赖于多个状态,可以将它们组合在一个对象中:
typescript 复制代码
import { useMemo } from 'react';

function MyComponent({ user, products }) {
  const userProductInfo = useMemo(() => {
    return {
      name: user.name,
      totalPurchases: products.filter(p => p.userId === user.id).length
    };
  }, [user, products]);

  return (
    <div>
      <p>User: {userProductInfo.name}</p>
      <p>Total Purchases: {userProductInfo.totalPurchases}</p>
    </div>
  );
}
  1. 对于需要频繁更新的计算属性,可以结合使用 useCallback:
typescript 复制代码
import { useMemo, useCallback } from 'react';

function MyComponent({ data }) {
  const processedData = useMemo(() => {
    // 复杂的数据处理逻辑
    return data.map(item => ({ ...item, processed: true }));
  }, [data]);

  const getItemById = useCallback((id) => {
    return processedData.find(item => item.id === id);
  }, [processedData]);

  return (
    <div>
      {/* 使用 processedData 和 getItemById */}
    </div>
  );
}

使用 useMemo 可以确保只有在依赖项发生变化时才重新计算值,从而优化性能。这与 Vue 3 的 computed 属性类似,都是用于缓存计算结果并在依赖更新时重新计算。

需要注意的是,不要过度使用 useMemo,因为它也会增加内存使用。只在计算成本较高或者需要避免不必要的重渲染时使用它。

Citations:

1\] https://blog.logrocket.com/vue-3-react-developers-side-by-side-comparison-demos/ \[2\] https://stackoverflow.com/questions/73523864/best-way-to-replace-computed-properties-of-vue-in-react \[3\] https://betterprogramming.pub/how-to-incrementally-migrate-from-vue-js-2-to-react-18-part-1-setup-be2cd04458f0?gi=12d5a286da55 \[4\] https://github.com/gloriasoft/veaury \[5\] https://vuejs.org/guide/essentials/computed.html

相关推荐
@大迁世界2 分钟前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
知识分享小能手4 分钟前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
DoraBigHead17 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu18 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡22 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞24 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu27 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu27 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu28 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge30 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端