如何在某些状态更改时停止 React Hooks 组件重新渲染？

【问题标题】：How to stop React Hooks component rerender on SOME state changes?如何在某些状态更改时停止 React Hooks 组件重新渲染？
【发布时间】：2021-04-08 20:58:37
【问题描述】：

我有以下代码：

const PlayArea = () => {
  const [foo, setFoo] = useState('foo')
  const [bar, setBar] = useState('bar')

  return <div>{bar}</div>
}

在我的项目中，每当我使用setFoo 时，整个组件都会重新渲染，我试图阻止这种情况。我只希望组件在 bar 更改时重新渲染。

无论如何我可以防止组件更改使用setFoo 吗？

【问题讨论】：

标签： react-hooks state

【解决方案1】：

无论如何我可以阻止组件更改使用设置Foo？

没有。根据设计，状态变量的工作方式是，当您更改它们时，该组件将重新呈现。

但是，如果您不想在更新该变量时重新渲染您的组件，那么您为什么要使用状态变量呢？使用useRef

请记住，useRef 不会在其内容更改时通知您。改变 .current 属性不会导致重新渲染。

【讨论】：