reactjs - 如何创建具有依赖项的 callbackRef

Question

这篇博文和官方文档展示了如何使用useCallback来创建回调 ref。

但是没有一个例子useCallback有依赖关系的例子。

我应该如何设置？

例如，如果我执行以下操作，它将不起作用，因为每当myDependency更改时回调将被触发而无需任何参数。

const [myDependency, setMyDependency] = useState();

const myRef = useCallback(node => {
    doSomeMagic(node, myDependency);
}, [myDependency]);

Answer 1

我认为最好的方法是将逻辑拆分为 auseCallback和 a useEffect。 useCallback用于跟踪节点。 useEffect用于在节点更改或myDependency更改时触发。

const [node, setNode] = useState();
const [myDependency, setMyDependency] = useState();

const myRef = useCallback(node => {
    setNode(node);
}, []);

useEffect(() => {
    doSomeMagic(node, myDependency);
}, [node, myDependency]);