在React中通过道具或状态更新样式时如何避免重新渲染子项？

Question

在我的应用程序的根目录中，我有两个 React 组件，Menu和Main。通过将菜单翻译到视口外部的左侧来隐藏菜单。当它可见时，我也希望主内容向右翻译。为此，我只需将 menuOpened 属性（boolean）传递给两个组件。它将应用一个条件样式来设置CSS转换属性translateX（）。问题是，当我更新道具时，所有孩子都会重新渲染。是否有更好的做法来改变某个州/道具的组件的风格？

Answer 1

正如所提到的评论 - “退回”并不昂贵。由于DOM树中几乎没有任何变化，因此差异很小，因此实际变化很小。

但是如果你真的想控制组件重新渲染的时间，你可以使用React生命周期方法shouldComponentUpdate(...)。

Answer 2

您可以在App容器中添加其他类（例如app_with-menu），以指示菜单是否已打开。然后在CSS中使用这样的样式：

.app .content {
   // style for content when menu is closed
}
.app.app_with-menu .content {
   // style for content when menu is opened
}