时间戳

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

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

问题描述

我有一个看起来像这样的布局组件：

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 的子项的唯一方法是什么？

标签： reactjsreact-hooks

解决方案

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

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

推荐阅读