홈>2020-02-26 08:05

reactjs - 상태를 잃어버린 게으른로드 된 구성 요소 반응

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

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가 느리게로드 된 컴포넌트를 다시 렌더링하는 대신 마운트 해제하고 다시 마운트합니다. 그리고 이것은 모든 내부 상태가 리셋되도록합니다. 물론 이것은 바람직하지 않습니다. 누구든지 어떤 솔루션을 추천 할 수 있습니까? 이 문제를 보여주는 코드 샌드 박스 입니다.

reactjsreact-routerlazy-loadingreact-hooks

답변 # 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> ); };

Python2.net

reactjs - 상태를 잃어버린 게으른로드 된 구성 요소 반응

관련 자료