react组件性能优化React.memo和useMemo

之前有一篇记录了，如何设计合理的react组件

设计高性能react组件的思路

React.memo

本质上是高阶组件，对传入的组件进行封装，调用方法如下：
首先我们声明一个组件D，

function ComD(props) {
    console.log("D组件")
    return <div>{props.text}</div>;
}

export default ComD;

在父组件的引入如下：

import { useState } from "react"
import ChildA from "./ChildA";
import ChildB from "./ChildB";
import ChildC from "./ChildC";
import ComD from "./ChildD";
function Home() {
    const [textA, setTextA] = useState("A组件的文本");
    const [textB, setTextB] = useState("B组件的文本");
    const [textC, setTextC] = useState("C组件的文本");
    const [textD, setTextD] = useState("D组件的文本");
    const changeA = () => {
        setTextA("A组件的文本发生的改变");
    }