关于react.js:React-Hooks-系列-之-useCallback

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