react组件渲染性能优化之函数组件-useMemo使用

useMemo的主要作用就是缓存值的,某些时候,组件中某些值需要根据状态进行一个二次计算(类似于 Vue 中的计算属性),由于函数组件一旦重新渲染,就会重新执行整个函数,这就导致之前的二次计算也会重新执行一次

import { useMemo, useState } from 'react'

export default function UseMemoOptimize() {
  // 维护两个状态
  const [counter, setCounter] = useState(1);
  const [val, setVal] = useState("");

  /**
   * 每次改变其它值的时候,都会重新调用该函数
   */
  function getCount() {
    console.log("getCount函数调用了")
    return counter + 100;
  }

  return (
    <div>
      <h1>总数:{getCount()}</h1>
      <button onClick={() => setCounter(counter + 1)}>+1</button>
      <input value={val} type="text" onChange={e=>setVal(e.target.value)} />
    </div>
  );
}

useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值。应用场景如:需要进行二次计算的状态

import { useMemo, useState } from 'react'
export default function UseMemoOptimize() {
  // 维护两个状态
  const [counter, setCounter] = useState(1);
  const [val, setVal] = useState("");
 
  /**
   * 在之前的状态的基础上做一个二次计算
   * @returns 返回一个缓存值
   */
  const countNum = useMemo(function getCount() {
    console.log("getCount函数调用了")
    return counter + 100;
  },[counter])


  return (
    <div>
      <h1>总数:{ countNum }</h1>
      <button onClick={() => setCounter(counter + 1)}>+1</button>
      <input value={val} type="text" onChange={e=>setVal(e.target.value)} />
    </div>
  );
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值