语法:
const memoizedCallback = useCallback(() => {setValue(value);}, [value]);
类型声明:
export function useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {const dispatcher = resolveDispatcher();return dispatcher.useCallback(callback, deps);}
说明:
memoized
回调函数useCallback
,它将返回该回调函数的 memoized
版本,该 回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用 引用相等性 去避免非必要渲染(例如 shouldComponentUpdate
)的子组件时,它将非常有用。useCallback(fn, deps)
相当于 useMemo(() => fn, deps)
。代码示例:
使用 React.memo
封装函数子组件,使用 useCallback
封装作为 props
传递给子组件的回调函数 ,只有当依赖数据变更时,传递的回调函数才会视为变更,子组件才会驱动引发重新渲染,这有助于优化性能
⚠️ 注意:
eslint-plugin-react-hooks
中的 exhaustive-deps
规则。此规则会在添加错误依赖时发出警告并给出修复建议。