Question

在此视频中，Dan提取了useDocumentTitle自定义钩子，但我发现自定义钩子触发器多次出现，有时是不必要的。问题是仅在关键道具发生变化时如何触发useEffect函数？可以这样实现，而无需使用自定义钩子：

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

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

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

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

Answer 1

您只需将键作为单独的参数传递，并在自定义钩子中获取您上面使用的代码。

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

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

您将以如下方式使用它：

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

您可以做的另一件事是，如果道具通过使用react.memo() https://reactjs.org/docs/react-api.html#reactmemo

进行更改，则仅重新渲染整个组件

还有一个钩子useMemo，在这里它很适合做繁重的工作https://reactjs.org/docs/hooks-reference.html#usememo

仅当道具更改时，如何在coustom挂钩触发器中使用useEffect？

1 个答案: