时间戳

首页 > 解决方案 > 整个页面重新渲染，而不仅仅是包含更新属性的组件

reactjs - 整个页面重新渲染，而不仅仅是包含更新属性的组件

问题描述

在下面的 React App 代码中，我设置了一个 useState 属性，该属性绑定到一个名为 Header 的函数组件。演示代码中没有显示的是我正在从另一个子组件调用 triggerTestProp 函数，该子组件位于例如 HomePage 组件中。

但是，每当我设置此属性时，不仅会重新呈现横幅，还会重新呈现包含标题的整个页面。如演示代码所示，我正在使用 React Router 进行导航。知道为什么要重新渲染整个页面，而不仅仅是按预期重新渲染标题吗？

function App() {
  const [testProp, setTestProp] = useState(
    "defaultVal"
  );

  function triggerTestProp(newTestProp: string) {
   setTestProp(newTestProp);
  }

  return (    
    <div>
      <Header banner={testProp}></Backdrop>
      <Router>
        <Switch>         
          <Route path="/home/">
            <HomePage></HomePage>
          </Route>
          <Route path="/:id">
            <DetailPage></DetailPage>
          </Route>
          <Route path="/">
            <HomePage></HomePage>
          </Route>
        </Switch>
      </Router>
    </div>    
  );
}

export default App;

标签： reactjs

解决方案

当您在 App.js 中设置状态时setTestProp(newTestProp);，它会重新呈现，这反过来会导致其所有子组件重新呈现。

为了防止子组件在其 props 或 state 未更改时重新渲染，请使用React.memo(). 将子组件导出为export default React.memo(HOmePage)

推荐阅读