当参数组件在 ReactJS 中使用 react router 渲染时，如何避免不必要地重新渲染 HOC 组件

Question

我正在使用 HOC（此处为布局组件）来包装我的自定义组件。 Layout 组件包含 Header 和 sidebar。单击 link 时，它将渲染相应的组件。但我的问题是，对于每条路线，我的 HOC 都会呈现为路线目标组件包装在这个 HOC 中。我怎样才能让我的 HOC 只渲染一次。示例代码段。

App.js

<Router>
<Switch>

<PrivateRoute path="routeOne" component={RouteOne}/>
<PrivateRoute path="routeTwo" component={RouteTwo}/>

</Switch>
</Router>

RouteOne.js

import React from "react"
import Layout from "/hoc"
const RouteOne  = () =>{
return({..jsx..})
}
export default Layout(RouteOne)

Layout.js

const Layout(WrappedComponent) => {
 const userDetails = useSelector(state);
 useEffect(()=>{
 dispatch(fetchSomething())
        },[dispatch])
    

 return ( <HeaderNavbarUILayout header={<Header 
 username={userDetails.userName}> 
 content={<WrappedComponent/>);
                }
export default Layout

我只想渲染我的 HOC 组件一次。我该怎么做？

Answer 1

编辑：我会遵循这种模式 https://simonsmith.io/reusing-layouts-in-react-router-4

const DefaultLayout = ({component: Component, ...rest}) => {
  return (
    <Route {...rest} render={matchProps => (
      <div className="DefaultLayout">
        <div className="Header">Header</div>
          <Component {...matchProps} />
        <div className="Footer">Footer</div>
      </div>
    )} />
  )
};

那么在通常定义路由的地方，将其替换为：

<DefaultLayout path="/" component={SomeComponent} />

我会看一下以下文档：

如何使用useEffect

https://reactjs.org/docs/hooks-reference.html#useeffect

组件更新应该如何实现

https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate

有条件地触发效果

```
useEffect(
  () => {
    ...
    };
  },
  [whatever you're watching],
);
```

Answer 2

被环绕的 hoc 每次都会呈现，这是预期的。但是 React 的 diffing 算法将只渲染改变的 DOM 元素。这里的问题是，每次呈现布局页面时都会调用调度，状态会更新，因此特定的 DOM 也会更新。这给人一种“重新加载”效果的印象。有条件地分派操作就可以了。仅在状态更改时调度。

当参数组件在 ReactJS 中使用 react router 渲染时，如何避免不必要地重新渲染 HOC 组件

How can I avoid unnecessary re rendering of an HOC component, when the parameter component renders in ReactJS with react router

javascript

reactjs

react-router

higher-order-components