是否可以在条件语句中使用 useMemo 挂钩？

Question

我试图在条件语句中使用反应钩子，不幸的是，反应给你几乎所有钩子的错误，并且它的意图按照钩子哲学。

然后我在 else 语句中尝试了 useMemo 钩子，并且没有错误。我用谷歌搜索了这个差异，但没有发现任何有希望的东西。

我的问题是，useMemo 是您可以在条件语句中使用 useMemo 的例外情况吗？

Answer 1

不可以，您不能在条件语句中运行useMemo或任何其他 React 挂钩。每次渲染组件时，必须以相同的顺序调用相同的 React hook。在我看来，hooks 的工作方式确实是违反直觉的，这也是 React 如此难以学习的主要原因之一。

有两种可能的解决方法，要么将条件移至钩子回调内，要么将代码移至单独的组件中。

以这个示例代码为例：

function MyComponent() {
    if (condition) {
        const myVar = useMemo(() => { return value; }, [value]);
        return <OtherComponent var={myVar}/>;
    } else {
        return <SomethingElse/>;
    }
}

一种替代方案是：

function MyComponent() {
    const myVar = useMemo(() => {
        if (condition) {
            return value;
        }
    }, [condition, value]);

    if (condition) {
        return <OtherComponent var={myVar}/>;
    } else {
        return <SomethingElse/>;
    }
}

另一种选择是：

function MyComponent() {
    if (condition) {
        return <MyComponent2/>;
    } else {
        return <SomethingElse/>;
    }
}

function MyComponent2() {
    const myVar = useMemo(() => { return value; }, [value]);
    return <OtherComponent var={myVar}/>;
}