十、React.memo

• React.memo() 是一个高阶组件
  • 接收另一个组件作为参数，并且返回一个包装后的新组件
  • 新的组件具有缓存功能，只有组件 props 发生变化时才会重新渲染，否则总是返回缓存中的结果
• 适用于数据较多加载较缓慢的组件

（一） src/index.js

import ReactDOM from "react-dom/client";
import { App } from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

（二） src/App.jsx

import React, { useState } from "react";
import A from "./A";

export const App = () => {
  console.log("App渲染");
  const [count, setCount] = useState(1);

  const clickHandler = () => {
    setCount((pre) => pre + 1);
  };

  return (
    <div>
      <h2>App --- {count}</h2>
      <button onClick={clickHandler}>增加</button>
      <A />
    </div>
  );
};

（三） src/A.jsx

import React, { useState } from "react";
import B from "./B";

const A = () => {
  console.log("A渲染");
  const [count, setCount] = useState(1);

  const clickHandler = () => {
    setCount((pre) => pre + 1);
  };

  const test = count % 4 === 0;

  return (
    <div>
      <h2>A --- {count}</h2>
      <button onClick={clickHandler}>增加</button>
      <B test={test} />
    </div>
  );
};

export default React.memo(A);

（四） src/B.jsx

import React from "react";

const B = (props) => {
  console.log("B渲染");
  return (
    <div>
      <h2>B</h2>
      <p>{props.test && "哈哈哈"}</p>
    </div>
  );
};

// export default B;
export default React.memo(B);