React : 보이지 않는 테이블의 구성 요소를 렌더링하지 마십시오.

Question

테이블이 30 행 이상> 50 개입니다. 각 행과 각 셀은 특정 React 구성 요소이므로 조작 할 수 있고 변경된 데이터를 기반으로 동작과 모양을 변경합니다.

Grid -> Row -> Cell

내가 응용 프로그램 상태를 처리 할 수 ​​MobX을 사용하고 있으며 일부 세포 구성 요소에 영향을주는 상태 변경에 관해서는, 조금 천천히 보인다

그래서 내 구성 요소 hierachy은 다음과 같습니다 . 모든 셀과 행이 사용자에게 표시되는 것은 아니기 때문에 (테이블이 스크롤 가능함) 실제로 볼 수있는 React 구성 요소 만 실행하면 성능이 향상 될 수 있다고 생각했습니다.

필자는 기존 구성 요소가 있는지 궁금하거나 퍼포먼스 방식으로 이러한 구성 요소를 만드는 방법에 대해 궁금해했습니다.

또한 셀과 행이 상태가 변경 될 때마다 다시 렌더링된다는 것을 알았습니다. 어쩌면 모든 셀과 행 구성 요소가 appStore를 주입한다는 사실과 관련이있을 수 있습니다. MobX는 변경된 구성 요소 만 다시 렌더링해야한다고 어떻게 말합니까? 그게 가능한가?

그래서 기본적으로 나는 어느쪽으로 든 찾고 있습니다.

Answer 1

저는 Mobx 또는 그와 관련된 솔루션에 익숙하지 않지만 표시된 구성 요소 만 보여 주면 커뮤니티의 "무한"구성 요소 이름을 사용하게됩니다. 따라서 "Infinite Scroll"또는 "Infinite List"를 검색하면 몇 가지 아이디어를 얻을 수 있습니다.

내가 찾은 최고의 라이브러리는 react-infinite입니다. 기본적으로 라이브러리는 하위 구성 요소를 전달하는 HOC입니다.

제 3 자 라이브러리가없는 순수 자바 스크립트 구현을 찾고있는 경우 페이스 북 팀의 Ben Alpert가 this fiddle/code on SO이라고 게시했습니다.

Answer 2

reremdering을 방지하기 위해 React의 shouldComponentUpdate (PureComponent가 상자에서 즉시 구현 됨)를 사용하여 행 구성 요소에 사용할 수 있습니다. <Row key={person.id} person={person} edit={this.edit}/>이있는 경우 SCU는 person 및 edit 소품을 비교하며 동일한 경우 해당 행을 다시 렌더링 할 수 없습니다. 따라서 행에 추가 할 때 변경된 행만 다시 렌더링됩니다.

이 최적화 key 소품 배열 인덱스 인 경우 또는 방해한다 edit 함수 인라인 함수 - edit={this.edit}edit={() => this.edit(person.id}는 매번 상이한 기준을 제시 할 때마다 동일한 도면을 나타낸다. 나는 react-visibility-sensor와

https://60devs.com/pure-component-in-react.html

https://mobx.js.org/best/react-performance.html

Answer 3

갈 것입니다.

뭔가 같은 :

const VisibilitySensor = require('react-visibility-sensor'); 

class TableRow extends React.Component { 

    onChange(isVisible) { 
     this.setState({isVisible: isVisible}); 
    }; 

    render() { 
     const { isVisible } = this.state; 

     return (
      <VisibilitySensor onChange={onChange}> 
       {isVisible && {/* Table row content */}} 
      </VisibilitySensor> 
     ); 
    } 
}