CellMeasurer를 올바르게 사용하는 방법은 무엇입니까?

Question

"반응 가상화"목록 안에 대화 형 구성 요소가있어 클릭에 따라 작동합니다. 구성 요소를 클릭하면 셀에서 높이가 변경됩니다. rowRenderer의

내 첫 번째 버전 :

메시지를 클릭

rowRenderer ({index, isScrolling, key, style}) { 
    let message = this.props.messages[index]; 

    return <Message key={message.id} text={message.text} /> 
} 

, 텍스트 필드가 나타납니다. 이것은 높이를 변경합니다. 그러나 그 구성 요소는 다음 메시지를 렌더링합니다.

메시지의 인스턴스가 당신이 볼 수있는 UI와 CellMeasurer에서 다르기 때문에이 문제가 발생 : 목록에 의해 생성

<CellMeasurer 
    cellRenderer={ 
     // Here we return instance 1 
     ({ rowIndex, ...rest }) => this.rowRenderer({ index: rowIndex, ...rest }) 
    } 
    columnCount={1} 
    rowCount={messages.length} 
    > 

    {({ getRowHeight, resetMeasurementForRow }) => { 
    this.resetMeasurementForRow = resetMeasurementForRow; 

    return <List 
     height={height} 
     overscanRowCount={50} 
     rowCount={messages.length} 
     rowHeight={getRowHeight} 
     rowRenderer={this.rowRenderer} // Here we create another instance 
     width={width} 
     ref={(ref)=>{ 
      this.list = ref; 
     }} 
    /> 
    }} 
</CellMeasurer> 

인스턴스는 분명히 올바른 상태를 포함하지만 CellMeasurer이 상태를 인식하지 못합니다.

다음 접근 방식을 테스트했지만이 방법이 올바른지 의심 스럽습니다. UI 구성 요소 인스턴스를 직접 캐싱하면됩니다.

rowRenderer ({index, isScrolling, key, style}) { 
    let message = this.props.messages[index]; 

    if(!this.componentCache[index]) { 
     this.componentCache[index] = <Message key={message.id} text={message.text} /> 
    } 

    return this.componentCache[index]; 
} 

이 문제는 해결되었지만 다른 많은 문제가있을 수 있습니다. 이 작업을 수행하는 올바른 방법은 무엇입니까?

(나는 플럭스/돌아 오는/전역 상태를 사용하여이 문제를 해결할 수 있지만, 내가 궁금하네요 것을 알고 있어요 내가 여기에 누락 몇 가지 근본적인 반응 가상화 기능/측면이있다.) 이것에

Answer 1

대답 문서에 실제로 :

는

CellMeasurer의 현재 구현 조치를, 필요에 따라 세포를 만든 다음 그들을 발생합니다. 이 구성 요소의 향후 버전은 복제를 시도하거나 다른 방법으로 성능 향상을 위해 상위 그리드와 셀을 공유 할 수 있습니다. 그러나 이 발생할 때까지 Stateful 구성 요소를 측정하기 위해 CellMeasurer를주의해야합니다. 세포는 측정 목적으로 저스트 - 인 - 시간으로 생성되므로 은 기본 상태로 측정됩니다. 에 대한이 문제를 방지하려면 셀 렌더링에 동작을 위해 상태 대신 제어 된 소품을 사용하십시오.

따라서 구성 요소 외부의 상태를 처리하는 것 외에 다른 해결책은 없습니다. 실제로, 나는 다음과 같이 그것을 고쳤다 :

rowRenderer ({index, isScrolling, key, style}) { 
    let message = this.props.messages[index]; 

    let selected = message.id === store.getState().selectedMessage; 

    return <Message key={message.id} text={message.text} selected={selected} /> 
}