2

在这篇关于使用上下文 API 进行状态管理的文章中，作者以这种方式将 useMemo 应用于 useState 返回值：

function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  const value = React.useMemo(() => [count, setCount], [count])
  return <CountContext.Provider value={value} {...props} />
}

我不确定是否了解此优化的目标：

  • 1/是否防止在任何道具发生变化时重新渲染，
  • 2/ 或者setCount本身可以虚假改变吗？

如果是1/，是不是就相当于下面的代码？（因为：除了孩子之外，我们还想将什么道具传递给上下文提供者？如果孩子改变，重新渲染是可取的）

function CountProvider({children}) {
  const [count, setCount] = React.useState(0)
  return (
    <CountContext.Provider value={[count, setCount]}>
      {children}
    </CountContext.Provider>
  );
}
4

0 回答 0