Question

我正在使用HOC（此处为布局组件）包装我的自定义组件。布局组件包含页眉和侧边栏。点击链接后，它将渲染相应的组件。但是我的问题是，对于每条路线，我的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元素。这里的问题是，每当呈现Layout页面并且状态被更新并且特定的DOM因此被更新时，都会调用调度。这给人一种“重新加载”效果的印象。有条件地调度操作将达到目的。仅在状态更改时分派。

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

2 个答案: