React Hooks 系列 之 useCallback

  • 原文地址--DapanDocs：https://skillgroup.cn/framework/react/hooks/use-callback.html

介绍

useCallback 是 React Hooks 中的一个重要成员，它容许咱们在屡次渲染中缓存函数。简略来说，它能够帮忙咱们防止因为函数的从新创立而导致的不必要的从新渲染。

const cachedFn = useCallback(fn, dependencies);

用法

1、跳过组件的从新渲染

当你优化渲染性能的时候，有时须要缓存传递给子组件的函数。例如，当你传递一个函数给一个被 memo 包裹的子组件时，useCallback 能够确保函数在屡次渲染中放弃不变，除非它的依赖产生扭转。

<div ref="useCallback1" />

::: details demo 代码
<<< @/components/react/hooks/memo/FunctionInProps4.jsx
:::

在下面的案例中，只有当依赖列表中的值发生变化时，getText 函数才会被从新创立。

2、优化自定义 Hook

当你创立自定义Hook时，倡议将返回的任何函数都包裹在useCallback中。这确保了Hook的使用者在须要时可能优化本人的代码。

<div ref="useCallback2" />

::: details demo 代码
<<< @/components/react/hooks/useCallback/useCounter.jsx
:::

调用 useCallback 后大抵执行状况

graph TD    A1[调用useCallback]    B1[创立/获取以后组件的Fiber节点]    C1[查看Fiber节点上的hooks链表-每个节点对应一个hook]    D1[是否存在对应的hook对象?]    E1[创立新的hook对象并存储函数]    F1[查看hook对象的memoizedState属性]    G1[依赖项是否扭转?]    H1[从memoizedState获取函数]    I1[存储新的函数]    J1[更新memoizedState属性]    K1[返回memoized函数]    A1 --> B1    B1 --> C1    C1 --> D1    D1 -- No --> E1    D1 -- Yes --> F1    E1 --> F1    F1 --> G1    G1 -- No --> H1 --> K1    G1 -- Yes --> I1 --> J1 --> K1