ReactJS : 하위 구성 요소 만 렌더링

Question

ReactJS에 처음 오 셨습니다. mxstbr/react-boilerplate 사용.

문제점 :

I는 REDUX-사가 수행 비동기 호출로부터 데이터를 수신하는 용기 (React.Component)를 갖는다. 데이터가 상태에 저장되면 컨테이너는 ReactJS로 예상대로 업데이트됩니다. 데이터는 차트를 렌더링하기 위해 데이터를 사용하는 두 개의 다른 하위 구성 요소로 전달됩니다. 한 구성 요소가 사용하는 데이터가 변경되면 전체 뷰가 새로 고쳐 지므로 다른 구성 요소가 다시 표시된다는 문제가 있습니다.

코드 : 컨테이너

export class Social extends React.Component { 
    render() { 
    return (
     <div> 
     <SocialChart data={this.props.socialData} /> 
     <WeekChart data={this.props.weekData} /> 
     </div> 
    ) 
    } 
} 

코드 : SocialChart (베어 본)

class SocialChart extends React.Component { 
    render() { 
    return (
     <p>Social Chart</p> 
    ); 
    } 
} 

코드 : WeekChart (베어 본)

class WeekChart extends React.Component { 
    render() { 
    return (
     <p>WeekChart Chart</p> 
    ); 
    } 
} 

생각 :

는 아마도 내가 필요 01 안에 뭔가를해라.또는 다른 라이프 사이클 메소드 중 하나. 나는 정말로 확신하지 못한다. 이 솔루션은 숙련 된 ReactJS 개발자에게 무언가가 될 수 있습니다.

Answer 1

하위 구성 요소 내에서 데이터가 변경 될 때만 하위 구성 요소를 다시 렌더링하려면 componentWillReceiveProps() 라이프 사이클 메소드에서 setState를 호출해야합니다.

하위 구성 요소는 다음과 같아야합니다.

componentWillReceiveProps(nextProps) { 
    if(nextProps !== this.props) { 
     this.setState({yourState: nextProps.yourProperty}); 
    } else { 
     do nothing 
    } 

} 

이렇게하면 새 데이터를 수신하지 않는 한 구성 요소가 다시 렌더링되지 않습니다. nextProps는 구성 요소로 들어오는 새 속성입니다. 현재 구성 요소에있는 것과 동일한 경우 setState를 수행하지 않으므로 차트를 다시 렌더링하지 않습니다.

Answer 2

하위 구성 요소에 내부 상태 (단지 소품)가없는 경우 새 하위 구성 요소 클래스를 확장하려면 PureComponent 클래스를 사용해야합니다. 그러면 들어오는 소품의 얕은 확인을 통해 자녀 구성 요소를 업데이트해야하는지 여부를 결정합니다. 그래서 :

class WeekChart extends React.PureComponent {...} class SocialChart extends React.PureComponent {...}

당신은 당신이 다시 쓰게 조건보다 수동 제어,이 경우 false이 업데이트되는 구성 요소를 방지해야한다 반환 (조건 적용)를 원하는 경우 shouldComponentUpdate(nextProps, nextState)를 사용해야합니다.

다음과 같이이 작업을 수행 할 것 :

shouldComponentUpdate(nextProps, nextState) { return this.props.somePropYouCareAbout !== nextProps.somePropYouCareAbout; }

참조 docs 당신이 할 수 있다면 PureComponent를 사용하려면

Answer 3

그것은이 정확한 이유 도입 된 이후 그. 그렇지 않으면이 재 렌더링에 대해 걱정할 실질적인 이유가 없습니다. 구성 요소에는 변경 사항이 없으므로 부모 구성 요소가 다시 렌더링하더라도 diff 알고리즘은 변경 사항을 볼 수 없으며 기본적으로 건너 뜁니다.

완벽 주의자 유형 일 수 있으므로 다시 렌더링하지 않는 것이 이상적이지만이 경우 이 아닌이 느린 응용 프로그램의 범인이 될 수 있습니다.