时间戳

首页 > 解决方案 > 仅在道具更改时如何在自定义钩子触发器中使用useEffect？

javascript - 仅在道具更改时如何在自定义钩子触发器中使用useEffect？

问题描述

在这个视频中，Dan 提取了一个 useDocumentTitle 自定义钩子，但是我多次发现自定义钩子触发，有时是不必要的。问题是如何仅在 key props 发生变化时触发 useEffect 功能？

不使用自定义钩子也可以这样实现：

useEffect(() => {
  console.log('useDocumentTitle ')

  document.title = myTitle);
}, [someProp])

但是如何使用自定义钩子呢？

https://youtu.be/dpw9EHDh2bM?t=2969

标签： javascriptreactjsreact-hooks

解决方案

您可以简单地将密钥作为单独的参数传递，并将上面使用的代码放在自定义挂钩中。

function useCustomHook({someProp, myTitle}) {
    useEffect(() => {
        console.log('useDocumentTitle ')

        document.title = myTitle);
    }, [someProp])
}

你会像这样使用它：

const customHookOptions = {someProp: props.key, myTitle: 'the title'}
useCustomHook(customHookOptions)

您可以做的另一件事是仅在使用https://reactjs.org/docs/react-api.html#reactmemo更改道具时重新渲染整个组件react.memo()

还有一个钩子useMemo有自己的地方可以做繁重的工作https://reactjs.org/docs/hooks-reference.html#usememo

推荐阅读