Question

我对使用useMemo的正确方法有些困惑。在这里（Should I wrap every prop with useCallback or useMemo, when to use this hooks?读到它说我必须将它用于昂贵的儿童，所以那到底是什么意思？有人可以提供真实的例子吗？

我创建了一个新的React项目，它使用两种不同的方法。

您可以在此处查看完整的代码（在同一页面中，您可以从一种方法切换到另一种方法）：

https://codesandbox.io/s/lucid-rgb-fz60n

在第一个示例中，我将包含AppContext和userState（是否记录）的对象传递给setUserState。

  const [userState, setUserState] = React.useReducer(reducer, initialUserState);

  const appState = {
    userState,
    setUserState
  }

  <AppContext.Provider value={appState}>

这种方法是否可以接受？

在第二个示例中，我使用useMemo：

const [userState, setUserState] = React.useReducer(reducer, initialUserState);

  const value = React.useMemo(() => {
    return {
      userState,
      setUserState
    };
  }, [userState]);

<AppContext.Provider value={value}>

因此，我认为在第二种情况下使用useMemo并不是一个好选择，因为子代不是昂贵的。这是正确的吗？

什么时候应该使用useMemo？什么是“昂贵的组件”？

0 个答案: