十一、useCallback

• onAdd 导致 A 组件的 props 一定会变化， memo 无效，可以使用 useCallback()
• useCallback() 是一个钩子函数，用来创建 React 中的回调函数
  • 该回调函数不会总在组件重新渲染时重新创建
• 参数
  • 回调函数
  • 依赖数组
    • 当依赖数组中的变量发生变化时，回调函数才会重新创建
    • 如果不指定依赖数组，回调函数每次都会重新创建
    • 一定要将回调函数中使用到的所有变量都设置到依赖数组中，除了 setState

（一） 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, useCallback } from "react";
import A from "./A";

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

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

  const clickHandler = useCallback(() => {
    // setCount((pre) => pre + 1);
    setCount((pre) => pre + number);
    setNumber((pre) => number + 1);
  }, [number]);

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

（三） src/A.jsx

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

const A = (props) => {
  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>
      <button onClick={props.onAdd}>增加App的Count</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);