react的计算属性useMemo

博客对比了Vue和React计算值的方法,Vue常用watch、watchEffect,React常用useMemo。还介绍了useMemo的使用注意点,如传入的函数在渲染期间执行,不要进行与渲染无关操作,有缓存,需在挂载或更新时操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在vue中通常使用watch, watchEffect来计算某一个值,而在react中通常使用useMemo来使用。
useMemo的使用

  let count = useMemo(() => {
    return (a + b)
  }, [a, b]) // a 和 b 必须是响应式
  // 第二个参数接收一个数组, 表示当a或b发生改变的时候调,重新计算,该属性。

使用useMemo的注意点: 传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作,诸如副作用这类的操作属于 useEffect 的适用范畴,而不是 useMemo。
注意:不要再useMemo使用,需要再挂载或者更新的时候操作。且useMemo有缓存。

### 自动计算属性与依赖追踪 #### Vue 中的自动计算属性和依赖追踪 在 Vue.js 中,`computed` 属性提供了一种声明方式来义那些基于其他数据动态变化的数据。每当其依赖项发生变化时,这些 `computed` 属性会重新求值并更新视图。 Vue 使用一种称为 **依赖收集机制** 来跟踪哪些组件或模板部分依赖于特的状态变量。当某个被监听的对象发生改变时,Vue 能够检测到这种变更,并通知所有相关的观察者去刷新自己所影响的部分[^1]。 ```javascript // 一个带有 computed 属性的例子 const app = new Vue({ el: '#app', data: { message: 'Hello' }, computed: { reversedMessage() { return this.message.split('').reverse().join(''); } } }); ``` #### React 中的自动计算逻辑 React 并不内置支持像 Vue 那样的显式的 `computed` 属性概念;然而,在函数组件中可以利用 Hooks API 如 `useMemo()` 或 `useReducer()` 来达到相似的效果。通过 memoization 技术可以在某些情况下模拟出类似的优化行为——即只有在其输入参数确实发生了更改的情况下才会执行昂贵的操作或者渲染过程[^2]。 ```jsx import React, { useMemo } from 'react'; function ExpensiveComponent({ value }) { const expensiveValue = useMemo(() => computeExpensiveValue(value), [value]); return ( <div> {/* Render the result */} </div> ); } ``` #### Angular 中的变化检测策略 Angular 则采用了不同的方法来进行响应式编程和支持类似于 “computed property”。它依靠强大的双向绑特性和内部使用的 Zone.js 库来拦截异步事件(比如时器、HTTP 请求),从而触发整个应用范围内的脏检查 (dirty checking),以此确保 UI 总能反映最新的模型状态。此外,还可以自义管道 (`pipe`) 来创建纯函数形式的转换操作,它们会在每次接收到新输入的时候运行一次以返回最新结果。 ```typescript import { PipeTransform, Pipe } from '@angular/core'; @Pipe({ name: 'customCompute' }) export class CustomComputePipe implements PipeTransform { transform(value: any): string { // Perform some computation here... return transformedValue; } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值