React 구성 요소 렌더링의 원인을 구별하는 방법 : 구성 요소의 내부 또는 외부에서 무엇인가?

Question

두 개의 중첩 된 반응 구성 요소 : Outer 및 Inner이 있습니다. setState이 Inner이라고 할 때마다 내부 구성 요소 인 render이 호출됩니다. 또한 외부 컴포넌트의 setState을 호출 할 때마다 render 외부 컴포넌트와 내부 컴포넌트의 함수가 호출됩니다. 이 두 경우를 구별하고 내부 구성 요소의 표현이 무엇인지 감지하고 싶습니다. 내 renderInner의 기능은 그에 따라 다르게 동작해야합니다. 어떻게해야합니까?

Answer 1

setState가 호출 될 때가 아니라 구성 요소가 새 소품 (여기에서 확인하십시오 : http://busypeoples.github.io/post/react-component-lifecycle/)을받을 때 구성 요소 WillReceiveProps가 호출된다는 사실을 사용할 수 있습니다. 중요하게는 다른 소품 일 필요조차 없습니다 기존의 것보다 (https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops). 당신은 또한 이후에하는 것이 어떻게 든 렌더링 것으로 설정 해제, 아니면 그냥 this.setState 모든 호출 또한 {: 거짓 parentUpdated}에 포함되어 있는지 확인해야하지만 그래서 당신은

componentWillReceiveProps() { 
    this.setState({parentUpdated: true}); 
} 

render() { 
    if (this.state.parentUpdated) { 
    // Render one way 
    } else { 
    // Render the other way 
    } 
} 

의 라인을 따라 뭔가를 할 수 있어야합니다.

Answer 2

Update 단계를 제어하려는 경우 Inner 구성 요소의 수명주기. Outer을 다시 렌더링 할 때 단계를 doc에서 확인하여 Inner의 동작을 제어 할 수 있습니다.