Hooks 中的 useMemo 作用

看了官网和百度的结果也不是很明白，只知道是优化子组件避免重复加载来使用的
具体看代码

父组件

import React, { useState } from 'react';
import Son from './components/Son';
export default (props) => {
  const [number, setNumber] = useState(0);
  const [name, setName] = useState(0);
  return (
    <>
      <button
        onClick={() => {
          setNumber(number + 1);
        }}
      >
        {'number is:' + number}
      </button>
      <button
        onClick={() => {
          setName(name+1);
        }}
      >
        {'change name'}
      </button>
      <Son name={name} />
    </>
  );
};

子组件

import React, { Component, useMemo } from 'react';

export default (props) => {
  const showName = (name) => {
    console.log('Son render');
    return 'my name is ' + name;
  };
  return (
    <>
      {/* <div>
        {useMemo(() => {
         return showName(props.name);
        }, [props.name])}

      </div> */}
      <div>{showName(props.name)}</div>
    </>
  );
};

此时无论点击number 还是 change name 都会导致子组件Son刷新 触发 showName方法执行，出于优化加载的目的 点击改变number没必要触发子组件内showName执行，只有changeName 的时候执行 showName 方法

Son 使用useMemo

  return (
    <>
      <div>
        {useMemo(() => {
         return showName(props.name);
        }, [props.name])}

      </div>
      {/* <div>{showName(props.name)}</div> */}
    </>
  );

useMemo(function,[监听的值])
这样点击改变number就不会触发Son内showName 执行了，只有props.name改变才会触发showName