REACT - 브라우저 후 버튼에서 페이지가 다시 렌더링되는 것을 방지합니다.

Question

많은 제품을 보여주는 카탈로그 페이지가 있습니다. 사용자가 하단에서 제품 중 하나를 클릭하면 제품 번호가 1000이라고 말하면 다른 페이지로 이동하여 내용을 확인합니다. 뒤로 버튼 사용 브라우저가 카탈로그 페이지로 돌아가면 모든 것이 다시 렌더링됩니다. 이는 의미가 있지만 이전에 선택한 제품에 스크롤 막대를 배치하는 데 많은 시간이 걸립니다.

사용자가 페이지 상단에서 특정 제품(예: 제품 번호 4)을 선택하면 모든 것이 잘 작동하지만, 하단으로 이동하면 시나리오가 시작됩니다.

REACT에서 이 디렉토리 페이지를 캐시할 수 있는 방법이 있나요? 렌더링하는 데 걸리는 시간을 피하려면?

목차 페이지 하단에 페이지 매김을 하면 이 문제가 해결되지만 "더 보기" 버튼이 있습니다. React.memo를 사용해 보았으나 현재 페이지에서 작업을 수행할 때만 작동하고 뒤로 버튼을 사용하여 해당 페이지로 이동할 때는 작동하지 않습니다.

저는 React Router v5를 사용하고 있습니다. 여기에 코드와 함께 몇 가지 codepen을 추가할 수 있지만 먼저 이것이 가능한지 알고 싶습니다. 뒤로 버튼을 눌러 돌아가면 모든 것을 렌더링해야 하고, 정적인 페이지처럼 보이고, 스크롤이 마지막 제품이 선택된 위치로 이동하지도 않는 페이지를 본 적이 있습니다. 어둠 속에 빛이 있을까?

이것은 나의 예입니다.

App.jsx

으아악

Home.jsx

으아악

Page1.jsx

으아악

Page2.jsx

import React, { StrictMode } from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
import './App.css';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';

function App() {
  return (
    <StrictMode>
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <Link to='/'>home</Link><br />
          <Link to='/page1'>page 1</Link><br />
          <Link to='/page2'>page 2</Link><br />
        </header>
        <Switch>
          <Route path='/page1'>
            <Page1 />
          </Route>
          <Route path='/page2'>
            <Page2 />
          </Route>
          <Route path='/'>
            <Home />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
    </StrictMode>
  );
}

export default App;

Answer 1

질문

그래서 앱에는 당신에게 불리한 일이 몇 가지 있습니다.

1. 데이터는 탐색 중인 구성 요소의 로컬 상태로 가져와 저장됩니다. 앱이 다른 경로로 이동하면 데이터가 손실되고 돌아올 때 다시 획득됩니다.
2. 렌더링할 데이터가 많습니다 .

가능한 제안 솔루션

상태 지속성 문제를 해결하기 위한 해결책은 렌더링되는 라우팅된 구성 요소보다 오래 지속되도록 상태를 공통 조상으로 승격시키는 것입니다. 상위 App 구성 요소 또는 사용자 정의 React Context 공급자 구성 요소이면 충분합니다.

예:

으아아아 으아아아

렌더링해야 하는 데이터 양의 문제를 해결하려면 가상화 또는 윈도우잉을 사용할 수 있습니다. react-window이 문제를 다루는 사람입니다. 이것이 하는 일은 전체 데이터 배열(잠재적으로 수천 개의 요소)을 DOM에 렌더링하는 대신 전후에 약간의 "오버스캔"을 통해 화면에 맞는 것만 렌더링하는 것입니다.

예:

으아아아

마지막으로 수정해야 할 사항은 특정 요소로 다시 스크롤하는 것입니다. react-window 能够滚动到特定索引。我们可以更新 CardDataContext 以保持某些滚动状态，并更新 Page1 특정 색인으로 스크롤하는 기능. CardDataContext를 업데이트하여 일부 스크롤 상태를 유지하고 Page1 구성 요소를 업데이트하여 위치를 설정하고 복원할 수 있습니다.

으아아아 으아아아

데모