在 React 中通过 props 或 state 更新样式时如何避免重新渲染子项？

Question

At the root of my App I have two React components, Menu and Main. The Menu is hidden by translating it to the left outside of the viewport. When it is visible, I also want the Main content to translate to the right. In order to do that I simply pass a menuOpened property (boolean) to both components. It will apply a conditional style that setup the CSS transform property translateX(). The problem is, when I update the prop, all the children will re-render. Is there a better practice for changing style of a component depdending of a state / props?

Answer 1

As a comment mentioned - a "rerender" is not expensive. Since almost nothing in your DOM tree has changed, the diff is tiny, and so the actual changes are small.

But if you really want to control when a component re-renders, you can use the React life-cycle method shouldComponentUpdate(...) .

Answer 2

You can add an additional class (for example app_with-menu ) to your App container which indicates if the menu is opened or not. And then style in CSS like this:

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