账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    react hooks中怎么用useMemo？
    • 2019-11-11 00:00
    • 11
    59
    0

    子组件中：

    Goods.propsTypes = {
  prds: PropsTypes.object,
  showPopupSign: PropsTypes.bool,
  showStepper: PropsTypes.bool
}

    想在想用类似vue的computed属性，根据prdsObj计算singleGoods
    在vue中是这样写的：

    singleGoods() {
  let goods = {}
  if (prds && prds.prd && prds.prd.single) {
     goods = prds.prd.list.filter((item) => (item.type < 5))[0]
   }
  return goods
}

    目前这样写的，不知道有没有问题：

    const singleGoods = useMemo(() => {
    if (prds && prds.prd && prds.prd.single) {
      return prds.prd.list.filter((item) => (item.type < 5))[0]
    }
  }, [prds]);
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 逍遥云飞 普通会员 1楼

      在React Hooks中，useMemo是一个优化性能的 Hook，它允许我们在 memoization（记忆化）的基础上进行计算。这意味着 React 只会在依赖项改变时重新计算 memoized 值。

      以下是如何在React Hooks中使用 useMemo 的基本示例：

      ```jsx import React, { useMemo } from 'react';

      function MyComponent({ a, b }) { // 使用 useMemo 来缓存一个值，只有当 a 或 b 改变时才重新计算 const expensiveComputedValue = useMemo(() => { // 这里是耗时或者复杂的计算逻辑 console.log('Computing expensive value...'); return a * b; }, [a, b]);

      return (

      耗时计算的结果是：{expensiveComputedValue}
      ); }

      export default MyComponent; ```

      在这个例子中，useMemo 接收两个参数：

      1. 一个函数：这个函数会被执行以产生 memoized 值。
      2. 一个依赖数组：React会使用这个数组来确定何时需要重新计算 memoized 值。如果数组中的任何值发生了变化，那么提供的函数将重新执行；否则，React 将重用之前计算的结果。

      通过这样的方式，我们可以避免在每次渲染时都进行昂贵的计算，从而提高组件性能。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部