단방향 데이터 흐름 : 거대한 항목 목록을 처리 할 때 재 작업을 줄일 수 있습니까?

Question

사용 방법을 이해 한 단방향 데이터 흐름 (Flux)은 특정 사용 사례에 적합하지 않은 것처럼 보입니다. 우리는 전체 달 동안 수백 개의 캘린더 항목 목록을 표시하는 SPA를 보유하고 있습니다. 각 항목은 몇 가지 세부 사항을 요약합니다.

UI를 사용하면 항목을 클릭하여 항목을 확장하여 추가 세부 정보를 표시 할 수 있습니다. 이것은 모델의 항목에 expanded 비트를 토글하는 간단한 문제입니다.

나를 괴롭히는 부분은 모든 사용자 조치가 DOM으로 조정 된보기 모델의 전체 다시 렌더링을 필요로한다는 것입니다. 따라서 수백 개의 항목 중 하나의 항목에 대해 약간의 토글을 사용하면 변경 사항을 수용하기 위해 변경 사항이 적용되지 않은 수백 개의 항목을 재생성하여 상당량의 재 작업을 트리거합니다.

불필요한 재 작업을 피하기 위해 올바른 편지함으로 업데이트 메시지를 전달하는 방법이 있어야합니다. React는 뷰 모델이 DOM에 대해 조정되는 방식을 최적화하기 위해 키를 사용하지만이 최적화를 사용하더라도 전체보기 모델이 모든 작업에서 완전히 재생성된다는 사실을 알고 있습니다. 메시지 라우팅과 DOM 조정이 더 나은 경우 수천 개의 항목 목록을 표시 할 수 없어야하는 이유는 없습니다.

저는이 문제를 해결하기위한 작업을하고 있습니다. 내 접근 방식은 이전 렌더링에서 뷰 모델을 캐시하는 메모 버전을 사용합니다. 나는 다른 사람들의 혁신으로부터 배움에 관심이있다. 아래 참조 problem.please 해결 REDUX-사가 사용을 제안

Answer 1

는 링크

[REDUX 세이] [1] https://shift.infinite.red/using-redux-saga-to-simplify-your-growing-react-native-codebase-2b8036f650de#.yz91g1rn2

Answer 2

반작용-돌아 오는 라이브러리 핸들 래퍼 요소를 생성하는 connect 기능을 제공한다 Redux 상점에 가입하십시오. connect은 lot 최적화를 구현하여 래핑 된 구성 요소가 실제로 필요한 경우에만 다시 렌더링되도록합니다. 또한 재 렌더링을 최적화하는 데 사용할 수있는 특정 패턴이 있습니다. 주된 것은 연결된 ID를 사용하여 자신의 데이터를 조회하는 연결된 자식에게 항목 ID를 전달하는 연결된 목록 구성 요소를 갖는 것입니다. 마지막으로, 일반적으로 Reselect 라이브러리로 생성 된 메모 기능의 "선택기"기능은 리 렌더링을 줄이는 데 도움이 될 수 있습니다.

내 React/Redux links list의 Redux Performance 섹션에는 Redux FAQ question on "scaling Redux"처럼이 항목에 대한 기사가 많이 있습니다. 기사 "High Performance Redux"은 특히 유익하며, 이번 주 초에 good performance benchmark comparing Redux vs MobX도있었습니다.