Question

考虑这个人为设计的代码段。

const foo = () => {return 1;} 
const bar = useMemo(() => {return foo();}, [foo])

当我触发react-hooks / exhaustive-deps警告时，我会收到这样的消息。

The 'foo' function makes the dependencies of useMemo Hook (at line 2) change on every render. Move it inside the useMemo callback. Alternatively, wrap the definition of 'foo' in its own useCallback() Hook.

警告给了我2条建议：1）将foo放入bar的useMemo回调中，或2）将函数包装在useCallback中。

我当然可以做。我只是想知道：这两个选项中的一个是否比另一个更可取？如果是，那为什么呢？如果您的答案是“取决于”，那么它究竟取决于什么？

Answer 1

两种方法都很好。该首选项基于代码以及您对它们的处理方式。

例如，如果您在多个位置使用foo，则将其移至useMemo回调内将无法正常工作。

如果您仅在useMemo回调中使用foo，则可以在其中进行定义。

在这种情况下，它看起来像：

const bar = useMemo(() => {
  const foo = () => 1;
  return foo();
  // include foo's dependencies in the deps array
}, []);

或者您可以内联定义它：

const bar = useMemo(() => {
  return 1;
  // include foo's dependencies in the deps array
}, []);

Answer 2

使用useEffect来解决此问题时，它具有清理功能

const [mounted, setMounted] = useState(true);


useEffect(()=>{

    if (mounted){
        buzz();

    }

    //Cleanup function
    return ()=>{
        setMounted(false);
    }
}, [mounted]) //hook dependency

解决反应挂钩/详尽下降警告的最佳方法

2 个答案: