时间戳

首页 > 解决方案 > 当参数组件在 ReactJS 中使用 React Router 渲染时，如何避免不必要地重新渲染 HOC 组件

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

问题描述

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

应用程序.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)

布局.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 组件一次。我怎样才能做到这一点？

标签： javascriptreactjsreact-routerhigher-order-components

解决方案

编辑：我会遵循这种模式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],
);
```

推荐阅读