useMemo

useMemo 为了性能优化存在的一个hook，把创建的函数和依赖项数组作为参数，它仅仅会在依赖项发生改变的时候，重新计算第一个参数的值，依赖不变时返回的值相同

语法 useMemo(()=>{.......},[])

接收两个参数：

1.第一个是函数，这个函数的返回值作为useMemo的返回值

2.第二个是数组，这个数组是依赖值，只有当数组里面的值改变了，才会重新计算

基础使用代码：

const countMemo=useMemo(()=>{
 .....处理相关逻辑
 return 返回值
},[count])

使用案例讲解

场景描述： 一个计算器，点击按钮+1，计算出总数之和。同时页面上还有其他元素显隐改变

1. 不使用useMemo时

import { useMemo, useState } from 'react'
function CaclNum(count: number) {
  console.log('重新渲染')
  let total = 0
  for (let i = 0; i <= count; i++) {total += i }
  return total
}

const Hook = () => {
  const [count, setCount] = useState(0)
  const [show, setShow] = useState(true)

 const total = CaclNum(count)

  return (
    <>
      <p>计算数字之和{total}</p>
      <button onClick={(e) => setCount(count + 1)}>点击+1</button>
      <button onClick={(e) => setShow(!show)}>切换</button>
    </>
  )
}
export default Hook

问题：show,count改变都会打印重新渲染，都会重新执行，重新计算 如果是计算量大的，就会直接体现出来界面的呈现就会出现卡顿的效果

1. 使用useMemo，进行优化

import { useMemo, useState } from 'react'
function CaclNum(count: number) {
  console.log('重新渲染')
  let total = 0
  for (let i = 0; i <= count; i++) {total += i }
  return total
}


const Hook = () => {
  const [count, setCount] = useState(0)
  const [show, setShow] = useState(true)

  /** 使用usememo优化后，show变化不会造成count改变 打印重新渲染 */
  const total = useMemo(() => {
    return CaclNum(count)
  }, [count])


  return (
    <>
      <p>计算数字之和{total}</p>
      <button onClick={(e) => setCount(count + 1)}>点击+1</button>
      <button onClick={(e) => setShow(!show)}>切换</button>
    </>
  )
}
export default Hook

结果：只有count改变时，才会重新计算， show改变时不会重新计算

小结

useMemo与vue中的计算属性一样，都会将复杂的计算进行缓存

结束语

希望大家能够喜欢我的文章，我真的很用心在写，也希望通过文章认识更多志同道合的朋友。

最后伙伴们，如果喜欢我的可以给点一个小小的赞👍或者关注➕都是对我最大的支持。