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>
  );
}