React-Keeper 프런트엔드 라우팅 캐시 스토리지 상태(대부분 회전)
7304 단어 react-routerreact.js
react를 접한 지 한참이 되었는데react의 전단 구조에 관한 연구를 해 왔습니다. 오늘 백엔드 관리 프로젝트를 할 때 제품 매니저가 제안했습니다. 목록 페이지에서 조회 조건을 작성한 다음에 결과를 조회하고 어떤 결과를 클릭하여 편집 페이지에 들어가고 편집이 끝난 후에 목록 페이지로 돌아갑니다.이전에 조회한 조건과 조회 결과도 보고 싶다.(현재는 질의 기준이 비어 있는 것처럼 페이지를 직접 새로 고칩니다.
vue를 접한 학우들은 vue가keep-alive로 구성 요소 상태를 캐시할 수 있다는 것을 알고 이동단 응용을 할 때 매우 편리하고 성능을 향상시킨다.그럼 react 이런 거 없나요?당연히 있죠. 그게 React-Keeper예요.
github 주소https://github.com/vifird/rea...
업데이트
프로젝트 실천
React-Keeper를 사용하는 것은 신중해야 한다. react-keeper에 두 가지 문제가 생긴다. 1.상태가 캐시되었습니다. 만약에 많은 페이지가 목록이라면 이것은 모든 페이지에 캐시 데이터가 있다는 것을 의미합니다. 다음에 페이지에 들어갈 때 떠날 때의 상태를 보여 줍니다. 그러면 캐시 데이터의 양도 적지 않고 브라우저 메모리를 차지하기 때문에 성능이 반드시 영향을 줄 것입니다. 언제 제거할 것인지가 문제입니다.플러그인은cache='parent'를 부모 구성 요소 캐시로 제공합니다. 부모 구성 요소가 연결되지 않은 상태에서 캐시 상태를 유지합니다.그러면 해결해야 할 것은 부모 구성 요소가 있어야 한다. 만약에 부모 구성 요소가 가장 바깥쪽 구성 요소라면 해제되지 않는다면 경로를 바꿔야 한다. 그러나 플러그인은 수동으로 캐시를 제거하는 방식을 제공하지 않아서 사용하기에 매우 원활하지 않다. 또한router3link와 약간 다르기 때문에 어쨌든 매우 번거롭다.2. 스타일 문제, 페이지가 돌아올 때 일부 스타일이 부족할 수 있습니다. 생명주기로 해결할 수 있지만 componentDidMount는 실행하지 않습니다. componentWillUpdate,render와componentDidUpdate는 이러한 주기에서 데이터 상태를 바꾸면 구성 요소 주기가 일직선으로 순환하고 브라우저 성능에 큰 영향을 줍니다!
다음은 옮겨 싣는 내용입니다.
React를 아는 학우들은 React-router를 잘 알아야 한다. 이것은 거의 React 단일 페이지 응용에 필수적인 루트 프레임워크이다.만약에 충분한 개발 경험이 있다면 리액터-router의 많은 문제점을 발견할 수 있을 것이다. 예를 들어 페이지 캐시가 없고 속성을 전달할 수 없고 JSX에서 벗어나는 동적 불러오기와 필터 구현 등이다. 이런 문제들은 특히 이동단에서 더 많은 문제를 나타낸다.
여기서 우리는 더욱 강력한 React 공유기를 추천합니다. React-Keeper는 React-router보다 유연하고 이동단에 적합하며 공유 기능이 더욱 튼튼한 구조입니다. React-Keeper는 기초 기능이 더욱 강한 것을 제외하고 특히 모바일 앱의 공유를 강화하여 더욱 풍부한 이동단 장면을 만족시킬 수 있습니다.
React-Keeper는 React-router의 사상을 흡수하고 사용 방식이 React-router와 유사도가 높으며 로트 구성 요소와 링크 구성 요소를 제공하여 기본적으로 React-router의 부드러운 이동을 실현할 수 있다.React-Keeper의 기초 강좌는 그 Github:Github [React-Keeper]를 참고할 수 있습니다. 여기서 저는 React-Keeper의 특성을 중점적으로 소개하겠습니다.
특징 소개
1. 확장 가능한 라우팅
언제든지, 구성 요소에 루트 설정을 추가할 수 있습니다.아래와 같이 루트가 일치하는 구성 요소 Products에 루트 구성 요소를 추가할 수 있습니다.이런 특성은 팀워크 개발에 우호적이고 루트 설정도 모듈화된 구분에 따라 나눌 수 있다.동적 마운트 수요가 있는 대형 사이트에도 적합하다.(이 기능은 React-router 최신 버전에서도 지원됨)
const App = ()=> {
return (
)
}
const Products = ()=> {
return (
)
}
ReactDOM.render(, document.getElementById('root'))
모바일 개발에서 우리는 흔히 이런 장면을 만날 수 있다. 한 목록 페이지에서 오랫동안 훑어보고 하나를 클릭하여 상세한 정보 페이지에 들어간 다음에 목록 페이지로 돌아간다. 이때 우리는 목록 페이지가 이전의 상태(스크롤 위치, 임시 조작 등)를 유지하기를 바란다. React-router는 이 문제를 해결할 수 없다. 돌아간 후에 목록 페이지의 DOM을 다시 불러오기를 바란다.그래서 우리는 어쩔 수 없이 이전의 상태를 다시 수동으로 되찾아야 한다.
여기에서 우리는 이 문제를 해결하기 위해 페이지 캐시 메커니즘이 필요하다.페이지 캐시란 주소가 루트와 일치하지 않을 때 자동으로 페이지의 상태를 캐시하고 일치할 때 페이지를 복원하는 것이다.
페이지 캐시는React-Keeper의 중요한 특성으로 내부에 캐시 관리자를 통합하여 루트 구성 요소의 귀속과 해제를 에이전트하여 페이지 캐시를 실현할 수 있다.React-Keeper에서 제공하는 3가지 페이지 캐시 방식은 다음과 같습니다.
2.1 cache 속성
cache 속성이 추가된 모든 루트 구성 요소는 React-Keeper 캐시 관리자가 페이지를 에이전트합니다.다음 예제에서 Home, AboutUs 페이지에는 캐시 에이전트가 사용됩니다.
class App extends React.Component {
render() {
return (
)
}
}
ReactDOM.render(, document.getElementById('root'))
cache='root'(또는cache)는 영구 캐시입니다. 루트 구성 요소가 연결되지 않으면 페이지는 영구 캐시입니다.
cache='parent'는 부모 구성 요소 캐시입니다. 부모 구성 요소가 묶이지 않은 상태에서 캐시 상태를 유지합니다.
2.2 CacheLink 구성 요소
React-Keeper는 CacheLink 구성 요소를 추가로 제공하여 Link에서 계승하기 때문에 Link 구성 요소의 모든 특성을 가진다. 또한 내부에 캐시 관리자를 연결하여 링크 전환 절차를 에이전트할 수 있다.
캐시링크 캐시는 임시 캐시입니다. 새로 페이지를 열 때 캐시 관리자는 링크의 원본 페이지를 임시 캐시하고 이전 페이지로 돌아갈 때 캐시 페이지를 추출하여 보여주고 캐시를 지웁니다.
이런 특성은 목록 페이지를 매우 많이 사용하는 캐시에 적용되는데 사용 방식은 다음과 같다:
HomeDetail React-Keeper에서 우리는 모든 루트 구성 요소에 여러 개의 필터를 따로 정의할 수 있습니다. 필터가 검증된 후에야 다음 작업을 할 수 있습니다. 루트는 두 가지 종류의 필터를 지원합니다. 그것이 바로 필터를 연결하고 해제하는 것입니다.
필터의 사용 장면에서 가장 자주 사용하는 것은 로그인 검증이다. 로그인 후에야 접근할 수 있는 일부 자원에 대해 우리는 로그인 검측이 통과된 후에 페이지 연결을 하는 것이지 먼저 페이지를 돌려서 검증하는 것이 아니다.다음은 React-Keeper 웹 사이트 로그인 필터링의 예제 코드입니다.
// Define a fllter, and run over it or not.
// receive 'props'
const loginFilter = (callback, props)=> {
if(!props.host) {
// dynamicly request data (use jQuery ajax)
$.ajax({
url: 'host/login.do',
data: {},
succeed: function(data){
if(data.host){
// run 'callback' function to enter next step (render component or next filter)
callback()
}
},
error: function(){
},
dataType: 'json'
})
}
}
// Added to Route Component
// Single Filter
// Multiple Filters
React-Keeper는 동적 구성 요소 불러오기를 지원하고 동적 불러오기 사용 방식도 매우 간단합니다. 로트 구성 요소 줄에서 직접 조작할 수 있습니다.다음과 같이 사용됩니다.
{
System.import('../Products.js').then((Products)=>{
callback(Products)
})
} } path='/products'>
참고: 동적 파일이 로드된 후에 필터가 실행됩니다.
5. 유연한 구성
React-Keeper 소스를 읽은 결과 내부에 React 개발자가 참고할 만한 몇 가지 부분이 있음을 발견했다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【초보자용】React-Redux로 ToDo 앱을 만들어 보았다다양한 기능을 추가해 보았습니다. · 로그인 기능 구현 또한 이번에는 React-Redux와 Hooks를 사용하여 구축을 해 보았습니다. 다음에 살려 가고 싶습니다! ~로그인 전~ SemanticUI의 아이콘으로 G...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
