reactjs - 是否可以在条件语句中使用 useMemo 钩子(Hook)？

Question

我试图在条件语句中使用 react 钩子(Hook)，不幸的是，react 为您提供了几乎所有钩子(Hook)的错误，并且按照钩子(Hook)哲学的意图。
然后我在 else 语句中尝试了 useMemo 钩子(Hook)，它没有错误。
我在谷歌上搜索了这种差异，但没有发现任何有希望的东西。
我的问题，
useMemo 是一个异常(exception)，您可以在条件语句中使用 useMemo。

Answer 1

不，你不能运行 useMemo或条件语句中的任何其他 React 钩子(Hook)。每次渲染组件时，必须以相同的顺序调用相同的 React 钩子(Hook)。在我看来，钩子(Hook)的工作方式确实违反直觉，并且是使 React 如此难以学习的主要因素之一。
有两种可能的解决方法，要么在钩子(Hook)回调中移动条件，要么将代码移动到单独的组件中。
以这个示例代码为例:

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

一种选择是:

function MyComponent() {
    const myVar = useMemo(() => {
        if (condition) {
            return 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; }, []);
    return <OtherComponent var={myVar}/>;
}