useMemo

实现目的：进行性能优化

如何进行性能优化

• useMemo 返回的是一个memorized的值，类型可能是函数
• 在依赖不变的情况下，多次定义的时候，返回值是相同的

演示

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

function calcNumber(count) {
  let total = 0
  for (let i = 0; i <=count; i++) {
    total += i
  }
  return total
}
export default function MemoHookDeme01() {
  const [counte, setcounte] = useState(10)
  const [show, setshow] = useState(true)

  // const total = calcNumber(counte)
  const total = useMemo(() => {
    return calcNumber(counte)
  }, [counte])


  return (
    <div>
      <h2>计算数字的和: {total}</h2>

      <button onClick={e=>setcounte(counte + 1)}>+1</button>
    
      <button onClick={e=>setshow(!show)}>show切换</button>

    </div>
  )

}

• 没有使用useMemo之前，每次计算和的时候，calcNumber 函数都要执行一遍，
• 使用useMemo后，只有counte发生改变的时候才会执行

useMemo传入子组件的应用类型

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

const HYInfo = memo((props)=> {
  console.log("执行");
  return (
    <h2>名字: {props.info.name} 年龄: {props.info.age}</h2>
  )
})
export default function MemoHookDemo02() {
  const [show, setshow] = useState(true)
  // const info = {name: 'why',age:18}
  const info = useMemo(()=> {
    return  {name: 'why',age:18}
  },[])


  return (
    <div>
        <HYInfo info={info}/>
        <button onClick={e=>setshow(!show)}>show切换</button>
    </div>
  )


}

• 传入值是对象，没有使用useMemo，子组件每次都要被重新渲染，因为info的值每次因为show改变的时候，重新定义。