官网:

关于useCallback:

需要明白的是:

1:使用Function组件时会定义很多内部函数,总觉得会影响组件性能,其实不然:看这里:

由于在渲染中创建函数，Hooks 很慢吗？ 不会。在现代浏览器中，闭包的原始性能与类相比没有显着差异，除非在极端情况下。

2:Hooks设计使得它更有效

钩子避免了类所需的大量开销，例如在构造函数中创建类实例和绑定事件处理程序的成本。 使用 Hooks 的惯用代码不需要在使用高阶组件、渲染道具和上下文的代码库中普遍存在的深层组件树嵌套。使用更小的组件树，React 要做的工作更少。

3:React.memo 和 React.useCallback 一定记得需要配对使用，缺了一个都可能导致性能不升反“降”

useCallback:

const memoizedCallback = useCallback(fn, deps) fn ：一个函数最终会返回该回调函数，该回调函数仅仅只在 deps 参数发生改变时才会更新 deps ：数组;用于触发 fn 回调函数改变的参数列表。

例子

import React, { useState } from react;
import { Space, Button } from antd;
export default function Index() {
  const [count, setcount] = useState(0);

  const ShowTime = () => {
    console.log(now time : + new Date());
  };

  return (
    <>
      <h1>index：{count}</h1>
      <Space>
        <Button type="primary" onClick={() => setcount(count + 1)}>
          increase
        </Button>
        <ChildComponent fn={ShowTime} />
      </Space>
    </>
  );
}
const ChildComponent = (props) => {
  console.log(child render!);
  return (
    <Button type="primary" onClick={props.fn}>
      showTime
    </Button>
  );
};

这里其实是有问题的,count并没有传递给子组件,但是count得值变化了,子组件也更新了,这不是我们想要的

用useCallback,memo改进

import React, { useState, memo, useCallback } from react;
import { Space, Button } from antd;
export default function Index() {
  const [count, setcount] = useState(0);

  /**
   * 把原来的showTime函数放在useCallback中
   */
  const countCallback = useCallback(() => {
    console.log(now time : + new Date());
  }, []);

  return (
    <>
      <h1>index：{count}</h1>
      <Space>
        <Button type="primary" onClick={() => setcount(count + 1)}>
          increase
        </Button>
        <ChildComponent fn={countCallback} />
      </Space>
    </>
  );
}
const ChildComponent = memo((props) => {
  console.log(child render!);
  return (
    <Button type="primary" onClick={props.fn}>
      showTime
    </Button>
  );
});

当我们更新count的时候,子组件并没有重新渲染

useCallback的第二个参数deps中阔以添加依赖,只有当这些依赖变化时视图才会重新更新