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

Question

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

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

我的问题， useMemo 是一个例外，您可以在条件语句中使用 useMemo 。

Answer 1

不，您不能useMemo在条件语句中运行或任何其他 React 挂钩。每次渲染组件时，都必须以相同的顺序调用相同的 React 钩子。在我看来，钩子的工作方式真的是违反直觉的，如果不是让 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}/>;
}