hooks/useMemo 优化子组件重复渲染

1. 父组件每次进行变化时子组件里面的方法都会再执行一遍，这样就造成了很大的性能损耗；
   下面是性能有问题的子组件，父组件点击志玲时子组件里面的changeXiaohong方法都会执行一遍

import React, { useState, useMemo } from "react";

function Example7() {
  const [xiaohong, setXiaohong] = useState("小红待客状态");
  const [zhiling, setZhiling] = useState("志玲待客状态");
  return (
    <>
      <button
        onClick={() => {
          setXiaohong(new Date().getTime());
        }}
      >
        小红
      </button>
      <button
        onClick={() => {
          setZhiling(new Date().getTime() + ",志玲向我们走来了");
        }}
      >
        志玲
      </button>
      <ChildComponent name={xiaohong}>{zhiling}</ChildComponent>
    </>
  );
}
function ChildComponent({ name, children }) {
  function changeXiaohong(name) {
    console.log("她来了，她来了。小红向我们走来了");
    return name + ",小红向我们走来了";
  }

  const actionXiaohong = changeXiaohong(name)   
// const actionXiaohong = useMemo(()=>changeXiaohong(name),[name]) 
  return (
    <>
      <div>{actionXiaohong}</div>
      <div>{children}</div>
    </>
  );
}
export default Example7;

控制台：点击了志玲，也会执行 changeXiaohong 函数

把 const actionXiaohong = changeXiaohong(name) 替换成 const actionXiaohong = useMemo(()=>changeXiaohong(name),[name]) 就可以解决组件重复渲染的问题