React,Hooks中useMemo的使用

useMemo:是为了性能的优化

1.useCallback会返回一个函数的memoized(记忆的)值
2.在依赖不变的情况下,多次定义的时候,返回的值是相同的

演示两个案例

一.复杂计算的应用

import React, { useState, useMemo } from 'react'

function allTotal(count){
  console.log('重新计算')
  let total = 0
  for(let i = 0;i<=count;i++){
    total +=i
  }
  return total
}

export default function MemoDemo() {

  const [count,setCount] = useState(10)
  const [show,setShow] = useState(true)
  
  const total = allTotal(count)

  return (
    <div>
      <h2>计算数字的和:{total}</h2>
      <button onClick={e=>setCount(count + 1)}>+1</button>
      <button onClick={e=>setShow(!show)}>切换</button>
    </div>
  )
}

当我改变show的值的时候，for循环跟它本身没有任何关系，但是因为整个组件的刷新，所以for也会执行一次，那么怎么不让它循环呢?

将 const total = allTotal(count)改成

const total = useMemo(()=>{
    return allTotal(count)
  },[count])

只有当count改变的时候，它才会重新执行

二.传入子组件引用类型

import React,{useState,memo, useMemo, useCallback} from 'react'

const HYInfo = memo((props) => {
  console.log('重新渲染')
  return <h2>名字:{props.info.name} 年龄:{props.info.age}</h2>
})

export default function MemoDemoTwo() {

   const info =  {name:'lsh',age:18}
   
  const [show,setShow] = useState(true)
  
  return (
    <div>
    <HYInfo info={info}></HYInfo>
   
    <button onClick={e=>setShow(!show)}>切换</button>
    </div>
  )
}

点击肯定子组件也会重新渲染,包裹一个memo,但是包裹了还是会重新渲染, 为什么呢？因为我们定义的info是一个局部变量,每次重新渲染都是重新定义一个新的info，然后子组件进行浅层比较时候,info永远是不一样的，所以就会重新渲染

怎么解决呢?

将 const info = {name:‘lsh’,age:18}换成

const info = useMemo(()=>{
   return {name:'lsh',age:18}
  },[])

其实useMemo和useCallback差不多作用，区别在于

useCallback:是对传过来的回调函数优化,返回值只能是一个函数
useMemo:返回值可以是任何,函数，对象等都可以

也可以用useMemo实现useCallback

const increament = useCallback(()=>{
  setCount(count + 1)
},[count])

//实现了上面的useCallback
const increament = useMemo(()=>{
  return ()=>{
    setCount(count +1)
  }
},[count])