>

필요할 때 (경로 변경시) 구성 요소를로드하는 아래 구성 요소가 있습니다.

function DynamicLoader(props) {
  const LazyComponent = React.lazy(() => import(`${props.component}`));
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

내 경로 (React-Router 사용)는 다음과 같습니다.

           <Switch>
            {routes.map((prop, key) => {
              return (
                <Route
                  exact
                  path={prop.path}
                  render={() => (
                    <DynamicLoader component={prop.component} />
                  )}
                  key={key}
                />
              );
            })}
          </Switch>

각 라우트에 컴포넌트를 마운트하는 한 잘 작동하지만, 상위 컴포넌트가 변경 될 때마다 React가 느리게로드 된 컴포넌트를 다시 렌더링하는 대신 마운트 해제하고 다시 마운트합니다. 그리고 이것은 모든 내부 상태가 리셋되도록합니다. 물론 이것은 바람직하지 않습니다. 누구든지 어떤 솔루션을 추천 할 수 있습니까? 이 문제를 보여주는 코드 샌드 박스 입니다.


  • 답변 # 1

    부모가 렌더링 될 때마다 DynamicLoader   LazyComponent 를 다시 만듭니다 . React는 동일한 구성 요소가 아닌 새 구성 요소를보고 이전 구성 요소를 마운트 해제 한 후 새 구성 요소에 마운트합니다.

    이 문제를 해결하려면 React.useMemo() 를 사용하십시오.   DynamicLoader 내부  현재 LazyComponent 를 기억하기 위해 props.component 인 경우에만 다시 작성합니다.  실제로 변경됩니다 :

    const DynamicLoader = ({ component, parentUpdate }) => {
      const LazyComponent = useMemo(() => React.lazy(() => import(component)), [
        component
      ]);
      return (
        <Suspense fallback={<div>Loading...</div>}>
          <LazyComponent parentUpdate={parentUpdate} />
        </Suspense>
      );
    };
    
    

    샌드 박스-메모 된 LazyComponent 를 보여주기 위해 나는 바깥 update 를 전달 해요   HomeA 에  구성 요소.

    와이즈 비즈 이후  캐싱이 보장되지는 않습니다 (반응은 때때로 메모리를 확보 할 수 있습니다). useMemo() 를 사용하여 간단한 지연 캐싱을 작성할 수 있습니다. :

    Map
    
    

    샌드 박스

    const componentsMap = new Map(); const getCachedLazy = component => { if (componentsMap.has(component)) return componentsMap.get(component); const Component = React.lazy(() => import(component)); componentsMap.set(component, Component); return Component; }; const DynamicLoader = ({ component, parentUpdate }) => { const LazyComponent = getCachedLazy(component); return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent parentUpdate={parentUpdate} /> </Suspense> ); };

관련 자료

  • 이전 java - testng 사용자 정의 기자 - 보고서에 stacktrace 추가
  • 다음 Kubernetes Jenkins 플러그인 보류중인 슬레이브에 대한 추가 리소스 만들기