Как я могу избежать ненужного повторного рендеринга компонента HO C, когда компонент параметра отображается в ReactJS с помощью маршрутизатора реакции

Question

Я использую HO C (компонент макета здесь), чтобы обернуть мой пользовательский компонент. Компонент Layout содержит заголовок и боковую панель. При нажатии на ссылку будет выполнен рендеринг соответствующего компонента. Но моя проблема в том, что с каждым маршрутом мой HO C отображается, поскольку целевой компонент маршрута заключен в этот HO C. Как я могу сделать мой HO C рендером только один раз. Пример фрагмента.

Приложение. 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

Я хочу визуализировать свой компонент HO C только один раз. Как я могу это сделать?

Answer 1

Обертываемый ho c рендерится каждый раз, и это ожидается. Но алгоритм сравнения React будет отображать только измененные элементы DOM. Проблема здесь заключалась в том, что диспетчерская вызывается каждый раз, когда отображается страница макета, и состояние обновляется, и, следовательно, обновляется конкретная DOM. Создается впечатление эффекта «перезагрузки». Условная отправка действия сделает свое дело. Отправка только при изменении состояния.

Answer 2

РЕДАКТИРОВАТЬ: я бы следовал этому шаблону 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-implementation-shouldcomponentupdate

условное срабатывание эффекта

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