當參數組件使用反應路由器在 ReactJS 中渲染時，如何避免不必要的 HOC 組件重新渲染

Question

我正在使用 HOC（此處的布局組件）來包裝我的自定義組件。 Layout 組件包含 Header 和側邊欄。 單擊鏈接時，它將呈現相應的組件。 但我的問題是，對於每條路由，我的 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 組件一次。 我怎樣才能做到這一點？

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 元素。 這里的問題是，每次呈現布局頁面並且 state 得到更新並且特定的 DOM 也因此得到更新時，都會調用調度。 這給人一種“重新加載”效果的印象。 有條件地分派動作就可以了。 僅在 state 發生變化時發貨。