reactjs - React Hooks : how to prevent re-rendering the whole component when only the props. 子值变化？

Question

我有一个如下所示的布局组件:

export const Layout = (props) => {
  return (
    <div>
      <MenuBar />
      {props.children} 
      <Footer />
    </div>
  );
};

...我想使用这个 Layout 组件来呈现不同页面的内容，如下所示:

export const App = () => {
  return (
    <div>
      <Router>
        <Layout>
          <Switch>
            <Route exact path="/">
              <PageHome />
            </Route>
            <Route path="/about">
              <PageAbout />
            </Route>
          </Switch>
        <Layout />
      </Router>
    </div>
  );
};

现在我遇到的问题是，每次路由更改时，props.children 值都会更改，因此整个 Layout 组件(包括 MenuBar 和 Footer)以及页面内容都会重新呈现。所以我的问题是:

1. 我能否在 props.children 值更改时阻止布局重新渲染？
2. 如果不是，是否是防止布局在每次路由更改时重新呈现以将 Switch 组件移出布局子项的唯一方法？

Answer 1

Layout 本身必须重新渲染，因为它有新的子组件，但是您可以防止 MenuBar 和 Footer 组件重新渲染使用 React.memo 创建它们:

const MenuBar = React.memo(function MyComponent(props) {
  /* render using props, it won't re rerender unless props change */
});