홈>
필요할 때 (경로 변경시) 구성 요소를로드하는 아래 구성 요소가 있습니다.
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
관련 자료
- reactjs - 후크를 반응시키기 위해 HOC 랩퍼 구성 요소를 자체 상태로 변경
- reactjs - 반응 변경 상태 다음 구성 요소
- javascript - React 구성 요소 상태를 다른 파일로 전달
- javascript - (React) 제출 버튼을 클릭했을 때 다른 컴포넌트의 상태를 가져 오는 방법은 무엇입니까?
- javascript - 나머지 배열을 삭제하지 않고 React 상태 배열에서 구성 요소를 삭제하려면 어떻게해야합니까?
- javascript - React 구성 요소에서 상태가 변경되지 않는 확인란
- reactjs - 제출시 반응 버튼 구성 요소에서 상태를 관리하는 방법
- javascript - React에서 historypush () 때 새 구성 요소의 상태를 설정할 수 없습니다
- javascript - react js - 값/상태가 업데이트되지 않음
- reactjs - axios 및 React State Hook으로 POST 요청을 만드는 방법
- reactjs - 객체 배열로 상태 필드 반응
- javascript - 렌더링 할 값을 설정하는 개체 값과 일치하도록 개체 배열을 매핑하는 Jest로 반응 구성 요소를 테스트하는 방법
- javascript - 상태가 필요에 따라 설정되지 않음 (반응, 후크)
- reactjs - 예상 결과로 반응 상태에 다음을 매핑하는 방법
- javascript - Vue 컴포넌트를 React App에 통합하려고합니다
- reactjs - React Native는 구성 요소 소품에 액세스 할 수 없습니다
- javascript - 아이들의 첫 번째 렌더링 useEffect에서 이전 상태로 후크 useState를 반응시킵니다
- reactjs - 구성 요소가 다시 렌더링 될 때 상태가 업데이트되지 않습니까?
- javascript - 소품이 변경 될 때 React 자식 구성 요소가 업데이트되지 않음
- reactjs - 컴포넌트가 마운트되기 전에 변경되는 바디 클래스에 반응
관련 질문
- reactjs : React 라우팅-구성 요소 상태 값이 보존되고 useReducer를 일부 useState 변수와 함께 사용할 수 있습니까?
- javascript : React 구성 요소가 무한대로 다시 렌더링됩니다.
- javascript : TypeScript의 React 라우터 액세스 매개 변수
- javascript : 오류 : 잘못된 후크 호출입니다. 제발 도와주세요
- javascript : Nested Switch가 React 라우터에서 작동하지 않습니다.
- javascript : 리로드시 페이지를 메뉴로 리디렉션하거나 반응으로 페이지를 새로 고치는 방법은 무엇입니까?
- javascript : react-router v6 : searchParams를 사용하여 URL로 이동
- javascript : React 구성 요소 외부에서 NextRouter 사용
- javascript : 반응 : 다단계 양식 /마법사 TypeError : 작업이 함수가 아닙니다.
- reactjs : 새로 고침시 인증 된 상태를 유지하는 방법은 무엇입니까?
부모가 렌더링 될 때마다
이 문제를 해결하려면DynamicLoader
LazyComponent
를 다시 만듭니다 . React는 동일한 구성 요소가 아닌 새 구성 요소를보고 이전 구성 요소를 마운트 해제 한 후 새 구성 요소에 마운트합니다.React.useMemo()
를 사용하십시오.DynamicLoader
내부 현재LazyComponent
를 기억하기 위해props.component
인 경우에만 다시 작성합니다. 실제로 변경됩니다 :샌드 박스-메모 된
LazyComponent
를 보여주기 위해 나는 바깥update
를 전달 해요HomeA
에 구성 요소.와이즈 비즈 이후 캐싱이 보장되지는 않습니다 (반응은 때때로 메모리를 확보 할 수 있습니다).
useMemo()
를 사용하여 간단한 지연 캐싱을 작성할 수 있습니다. :샌드 박스
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> ); };