Question

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

2021-02-19

19705

reactjs react-hooks react-usememo

我试图在条件语句中使用 React Hooks，不幸的是，React 几乎为所有 Hooks 都给出了错误，而这符合 Hooks 的理念。

然后我尝试在 else 语句中使用 useMemo Hook，它没有任何错误。我在 Google 上搜索了这种差异，但没有找到任何有希望的东西。

我的问题是， 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}/>;
}