:::info 原理：对函数的返回值进行相应的缓存，提升React的计算性能。

• useCallback是对传入的回调函数(返回一个有记忆的函数)进行性能优化。
• useMemo是对传入函数的返回值进行相应的性能优化。 :::

1、计算求和

import React, { useState } from 'react'
// 计算从0到传入数字的总和
function calcNumber(number) {
  let total = 0;
  for(let i = 0; i <= number; i++) {
    console.log(i)
    total += i
  }
  return total
}
export default function useMemoDemo() {
  // 定义状态
  const [count, setCount] = useState(10)   
  const [show, setShow] = useState(true)
  // 循环进行计算 这样使用的话 当我们的组件中的状态发生变化的时候 组件中所有的数据都需要进行重新的计算 消耗性能
  let total = calcNumber(count)
  return (
    <div>
      <h2>总和: { total }</h2>
      <button onClick={ () => setCount(count + 1)}>+1</button>
      <button onClick={ () => setShow(!show)}>切换</button>
    </div>
  )
}

2、计算求和进行性能优化

import React, { useState, useMemo } from 'react'
// 计算从0到传入数字的总和
function calcNumber(number) {
  let total = 0;
  for(let i = 0; i <= number; i++) {
    console.log(i)
    total += i
  }
  return total
}
export default function useMemoDemo() {
  // 定义状态
  const [count, setCount] = useState(10)   
  const [show, setShow] = useState(true)
  // 循环进行计算 这样使用的话 当我们的组件中的状态发生变化的时候 组件中所有的数据都需要进行重新的计算 消耗性能
  // let total = calcNumber(count)
  const total = useMemo(() => {
    return calcNumber(count)
    // 传入需要依赖的组件的内部状态 如果组件的内部状态发生改变 则调用函数 
    // 如果组件内部的状态不再发生改变 则这个hook函数不会进行调用
  }, [count])
  return (
    <div>
      <h2>总和: { total }</h2>
      <button onClick={ () => setCount(count + 1)}>+1</button>
      <button onClick={ () => setShow(!show)}>切换</button>
    </div>
  )
}

3、useMemo传入子组件应用类型

当存在子组件的时候，子组件是否重新进行渲染，取决于组件的状态是否发生了变化，如果组件的状态发生了变化，那么子组件就会重新进行渲染，如果没有发生变化，则不会进行相应的数据的渲染。

import React, { memo, useMemo, useState } from 'react'
// 定义子组件
const HYInfo = memo((props) => {
  console.log('子组件重新渲染了');
  return (
    <>
      <h2>{ props.info.name }</h2>
      <h2>{ props.info.age }</h2>
    </>
  )
})
export default function UseMemoHookDemo() {
  console.log('父组件渲染了');
  // 定义状态
  const [show, setShow] = useState(true)
  // 定义局部的一个变量
  // const info = { name: 'coderweiwei', age: 14 }
  // 使用useMeno进行相应的优化
  const info = useMemo(() => {
    return { name: 'coderweiwei', age: 18 }
  }, [])
  return (
    <div>
      <HYInfo info={info} />
      <button onClick={ e => setShow(!show)}>父组件改变状态</button>
    </div>
  )
}