使用场景

在类组件中，我们可以使用shouldComponentUpdate进行性能优化，函数组件无法使用生命周期，那如何进行性能优化呢，useMemo就是解决函数组件性能优化问题的，useMemo接受两个参数，函数和依赖项数组，将返回的函数和依赖项数组传入useMemo,他仅会在某个依赖项改变时才会重新计算执行，达到优化目的

详细解释

useMemo(fn, arr)，arr改变，会多次执行fn,否则只执行一次，若arr为[]，只执行一次

举例说明

Father组件有两个状态数据，count和flag，Child组件接受两个参数，count和flag，Child组件的getCount函数使用useMemo包裹，依赖项为count，初始触发一次，打印了"触发了"，点击changeFlag按钮，没有打印"触发了"，每点击changeCount按钮，都会打印"触发了"

//Father
import React, { useState } from "react";
import Child from './Child'

export default function Father() {
  let [flag, setFlag] = useState(100);
  let [count,setCount] = useState(1);
  return <div>
    <p>{flag}</p>
    <button onClick={()=>setFlag(++flag)}>changeFlag</button>
    <p>{count}</p>
    <button onClick={()=>setCount(++count)}>changeCount</button>
    <br/>
    <Child count={count} flag={flag}/>
  </div>;
}

//Child
import React, { useMemo } from "react";

export default function Child(props) {
  const getCount = useMemo(() => {
    console.log('触发了');
  },[props.count])
  return <div>Child</div>;
}

控制子组件渲染

点击change，仅会打印出app render，因为count1并未改变，点击change1,才会打印出button render

//App.js
import React, { useState, useMemo ,useEffect} from 'react';
import Button from './Button';

export default function App() {
  let [count,setCount] = useState(0)
  let [count1,setCount1] = useState(0)
  useEffect(() => {
    console.log("app render");
  });
  return (
    <div>
      <button onClick={()=>setCount(++count)}>change</button>
      <button onClick={()=>setCount1(++count1)}>change1</button>
      {
        useMemo(()=> <Button count1={count1}/>,[count1])
      }
    </div>
  );
}

//Button.js
import React, { useEffect } from "react";

export default function Button(props) {
  useEffect(() => {
    console.log("button render");
  });
  return <div>{props.count1}</div>;
}