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

Question

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

然后我尝试在 else 语句中使用 useMemo 钩子，它没有出错。我在谷歌上搜索了这个差异，但没有找到任何有希望的东西。

我的问题， useMemo 是不是可以在条件语句中使用 useMemo 的异常。

Answer 1

不，您不能运行 useMemo 或条件语句中的任何其他 React 挂钩。每次渲染组件时，必须以相同的顺序调用相同的 React 钩子。在我看来，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}/>;
}

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

is it possible to use useMemo hook inside contitional statement?

reactjs

react-hooks

react-usememo