componentDidUpdate vs componentWillReceiveProps 사용 사례 in react

componentDidUpdate vs componentWillReceiveProps 사용 사례 in react

사용법은 다음과 같습니다.componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  if(nextProps.myProp !== this.props.myProps) {
    // nextProps.myProp has a different value than our current prop
  }
}

와 매우 유사합니다.componentDidUpdate

componentDidUpdate(prevProps) {
  if(prevProps.myProps !== this.props.myProp) {
    // this.props.myProp has a different value
    // ...
  }
}

예를 들어 componentDidUpdate에서 setState를 실행하면 렌더가 두 번 트리거되며 componentWillReceiveProps 인수는 nextProps 인수가 됩니다.componentDidUpdateprevProp입니다만, 정말로 언제 그것들을 사용할지 모르겠습니다.자주 사용합니다.componentDidUpdate단, prevState에서는 드롭다운스테이트와 콜 API를 변경한다.

예:

componentDidUpdate(prevProps, prevState) {
      if(prevState.seleted !== this.state.seleted) {
        this.setState({ selected: something}, ()=> callAPI())
      }
    }

두 가지 주요 차이점은 다음과 같습니다.

• 컴포넌트의 라이프 사이클에서 호출된 경우
• 컴포넌트 업데이트 방법state

언제 부르죠?

이름에서 알 수 있듯이 componentDidUpdate에서 setState를 실행하면 렌더가 두 번 트리거됩니다.componentDidUpdate컴포넌트가 갱신된 후에 호출됩니다(새로운 소품 또는 상태 참조).이것이 이 함수의 파라미터가prevProps그리고.prevState.

컴포넌트가 새로운 소품을 받기 전에 뭔가를 하고 싶다면componentWillReceiveProps새로운 소품이나 상태를 받은 후 무언가를 하고 싶다면componentDidUpdate.

업데이트 방법state?

주요 차이점은 다음과 같습니다.

• componentWillReceiveProps상태를 동기화하여 업데이트합니다.
• componentDidUpdate는 비동기적으로 상태를 업데이트합니다.

컴포넌트 소품의 다른 부분과 상태를 동기화하려고 할 때 나타나는 몇 가지 gotchya가 있기 때문에 이것은 중요합니다.

언급URL : https://stackoverflow.com/questions/49386324/componentdidupdate-vs-componentwillreceiveprops-use-case-in-react