shouldComponentUpdate에서 lodash 사용

이것이 최선의 방법으로 간주됩니까? 또는 불필요한 재 렌더링을 방지하는 더 나은 솔루션이 있습니까?shouldComponentUpdate에서 lodash 사용

수천 개의 행을 렌더링하려고합니다. 각 행에는 많은 셀이 있습니다. 그러나 내 감속기 중 하나에서 관련 상태가 아니라면 병목 현상을 예방하는 데 꽤 어려움이 있습니다.

import React, { Component } from 'react' 
import _ from 'lodash' 

import Cell from './Cell' 

export class Row extends Component { 

    shouldComponentUpdate (newProps) { 
    return !_.isEqual(newProps.item, this.props.item) 
    } 

    componentDidUpdate (prevProps, prevState) { 
    console.log('row is updated!') 
    } 

    render() { 
    const { item } = this.props 

    return (
     <div className='rowek'> 
     {item.map((i, key) => <Cell key={key} item={i}/>)} 
     </div> 
    ) 
    } 
} 

export default Row

출처

2016-10-23 Michal

@ 나는 유사한 구조를 가지고 있고 나뿐만 아니라 shouldComponentUpdate를 사용 (나는 당신의 국가의 디자인을 모른다). –

네, 정상입니다. React의 최신 버전을 사용하고 있다면, 이것을 정확하게 수행하는'class Row extends PureComponent'를 사용할 수 있습니다. – azium

모든 날짜에 비동기 데이터가 포함 된 캘린더를 구축 한 경험이 비슷합니다.

내 추천 :

ShouldComponentUpdate 앱의 성능이 저하 될 수는 반응의 기본 동작은이 상황을 처리하고 데이터가 변경되지 않은 경우 다시 렌더링을 피하기 위해 이미 충분히 좋다. 다음을 살펴볼 수도 있습니다. https://facebook.github.io/react/docs/react-api.html#react.purecomponent
응용 프로그램이 실제로 프로덕션 환경에서 느린 지 테스트하십시오. (축소 된 파일, 조치 로거 없음 등).
key={key} 필자는 이것을 내 셀의 키로 신뢰하지 않으므로 행의 번호를 미리 지정하거나보다 구체적인 번호를 붙이십시오.
실제로 모든 셀을 상태의 속성과 직접 매핑 할 수있는 방법이 있습니까?

Cell.js

const mapStateToProps = (state, { index }) => ({ 
    item: selectItemByCellIndex(index), 
});

출처

2016-10-23 19:29:40

직접 참조를 사용할 수도 있지만 행을 필터링하고 다른 논리를 수행하려고합니다. 아마도 ImmutableJs가 유일한 답일까요? – Michal

ImmutableJs가 더 좋게 만들 것이라고 생각하지 않습니다. 주정부에서도 여전히 변경 사항을 나타내고, 행의 일부를 주 (state)로 직접 참조하려고하며, 일정 시나리오에서 수행 한 것입니다. 내 날짜는 데이터를 반복합니다. 그 주에 속한다. –

정말 도움이되지는 않지만 시간을 내 주셔서 감사합니다. 나는 더 많은 예제를 게시 했어야했다. : / – Michal

shouldComponentUpdate에서 lodash 사용

답변

관련 문제