React Hooks：当只有 props.children 值发生变化时，如何防止重新渲染整个组件？

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. 如果没有，是防止 Layout 在每次路由更改时重新渲染以将 Switch 组件移出 Layout 的子级的唯一方法吗？

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 */
});