Reactjs : 렌더의 상태를 몇 번만 변경하십시오.

Question

렌더링 기능에서 상태를 변경하지 않아도되고 무한한 다시 렌더링 또는 구성 요소가 변경되는 것으로 생각하지 않습니다.

이것은 완벽하게 이해할 수 있지만 특정 상황에서 자신을 찾습니다. 오프라인 응용 프로그램을 구축 중이며 오프라인 저장소 시스템을 사용하여 데이터를 검색하고 있습니다. 이제 특정 데이터를 가져 오기 위해 메소드가 호출 될 때마다 캐시가 검사되고, 만료되지 않으면 구성 요소가 데이터에 액세스 할 수 없으므로 아무 일도 일어나지 않지만 만료되면 API 호출, 데이터 관심있는 구성 요소가 다시 렌더링됩니다.

이러한 메서드는 새 데이터를 가져와 다시 렌더링하는 API로 이동하기 때문에 처음 호출 할 때 구성 요소의 상태가 변경되며 데이터가 이미 있으므로 상태를 더 이상 변경하지 않습니다 캐시에.

이제는 컴포넌트가 마운트 될 때 이러한 메소드를 호출 할 수 있습니다. 그게 지금하고있는 일이지만, 다시 호출해야하는 경우 컴포넌트를 마운트 해제하고 다시 마운트해야합니다. 이것이 가능한 유일한 방법입니까?

감사합니다.

Answer 1

글쎄, 첫 번째 단계는 상태 관리와 렌더링이 이미 분리되어 있어야한다는 것을 이해하는 것입니다.

이제 외부 상태/캐시 요소를 관찰 가능한 개체로 간주 할 수 있습니다 (예 : observableObject.listen('change', onChangeHandler)과 같은 작업을 수행하고 events 라이브러리의 EventsEmitter를 사용할 수 있음). You do that listening on componentDidMount and clean up in componentWillUnmout. 그 onChangeHandler은 매우 간단합니다 : this.setState({ value: observableObject.value }) 이것은 props에 따라 DOM 노드를 출력하는 순수한 함수 여야하며 자체는 state입니다.

즉, 캐시가 유효하지 않은지 확인하는 논리는 값의 요청 (렌더링 내부)이 아니며 개체가 자체 포함 된 것으로 생각합니다. 리스너가 변경되었다는 것을 리스너에 알릴 필요가 있는지 정기적으로 검사합니다. JS는 병렬 실행을하지 않기 때문에 스레드와 동기화를 다룰 필요가 없습니다. 당신은 렌더링 함수가 실행되는 시점에 최신 값을 가질 것이라는 것을 알고 있습니다. 캐시 실행을 확인하는 논리를 렌더링 한 후 업데이트해야한다고 판단한 경우 onChangeHandler이 state을 변경했기 때문에 청취자가 이전에 말한대로 알림을 보내면 구성 요소가 다시 렌더링됩니다.

희망이 있습니다.