getDerivedStateFromProps가 setState 뒤에 호출되는 이유는 무엇입니까?

getDerivedStateFromProps가 setState 뒤에 호출되는 이유는 무엇입니까?

리액션이 새로운 정적 방법을 도입했습니다.getDerivedStateFromProps(props, state)모든 렌더링 방법 전에 호출됩니다만, 그 이유는 무엇입니까?소품 교환 후에 전화하는 것은 말이 되지만, 그 후에setState그렇지 않아, 내가 뭔가 놓치고 있는 것 같아.

작성했습니다.datePicker회사 요건에 따라 컴포넌트 날짜는 프로펠러에서 관리합니다.컴포넌트의 상태는 다음과 같습니다.

selectedDate: number;
selectedMonth: number;
selectedYear: number;
currentMonth: number;
currentYear: number;
view: string;

selected는 날짜 프로펠러 및 날짜 프로펠러에서 파생된 선택된 날짜를 나타냅니다.currentMonth그리고.currentYear는 현재 달력 보기에서 월과 연도를 나타냅니다.

한다면date소품 변경으로부터selected*,currentMonth그리고.currentYear그에 따라 변경해야 합니다.그러기 위해서, 저는getDerivedStateFromProps그러나 사용자가 달력 보기를 월로 전환하는 월 이름을 클릭한다고 가정하면(월 이름 대신 월 이름이 표시됨), 함수는 다음을 업데이트합니다.currentMonth여기에는 setState를 사용하지만 프로포트가 이전(전월 포함)과 동일한 날짜로 되어 있습니다.getDerivedStateFromProps이 호출되고 current Month는 변경되지 않고 이전과 동일합니다.

Right I는 추가 변수를 만듭니다.state추적하다getDerivedStateFromProps에 의해 호출됩니다.setState그게 옳은 방법이 아닌 것 같아.

내가 뭘 잘못했거나 놓쳤거나getDerivedStateFromProps를 따서 부르면 안 된다.setState아마 내가 뭔가 잘못하고 있는 것 같아.

그 길getDerivedStateFromProps후크는 새로운 소품, setState 및 forceUpdate를 수신할 때마다 작동합니다.

의 버전에서는16.3, 리액트는 영향을 주지 않습니다.getDerivedStateFromProps할 때마다setState사용되고 있습니다.근데 버전부터 개량해서16.4그래서 항상setState라고 불리고 있다.getDerivedStateFromProps훅이 걸려있어요.

다음은 React 라이프 사이클 다이어그램에서 추출한 이미지입니다.

16.3

^16.4

---

그래서 언제 걸어야 할지는 당신에게 달렸어요.getDerivedStateFromProps소품이나 상태를 제대로 확인하면서요.다음은 예를 제시하겠습니다.

static getDerivedStateFromProps (props, state) {
  // check your condition when it should run?
  if(props.currentMonth != state.currentMonth) {
    return {
      currentMonth: state.currentMonth
    }
  }
  // otherwise, don't do anything
  else {
   return null
  }
}

이런 거 했어요.

constructor(props) {
    super(props);
    this.state = {
        expanded: props.expanded,
        ownUpdate: false
    }
}

static getDerivedStateFromProps(props, state) {
    if (state.ownUpdate) {
        return {
            expanded: state.expanded,
            ownUpdate: false
        };
    } else if (props.expanded !== state.expanded) {
        return {
            expanded: props.expanded
        };
    }
    return null;
}

toggle() {
    this.props.onAftePress(this.state.expanded, this.props.index);
    this.setState({
        expanded: !this.state.expanded,
        ownUpdate: true
    })
}

저도 그 문제가 생겼어요.그래서 제가 확인해야 할 또 다른 변수는 처음 받은 소품입니다.

this.state={flag:true}

props에서 파생 스테이트를 가져옵니다.

static getderivedstatefromprops(props, state){
   if(props.<*propName*> && flag){
      return({ props.<*propName*>, flag:false})
   }
}

여러 개의 소품 값을 사용하려면 if 문(또는 다른 논리)을 적절하게 설정해야 합니다.

질문 자체에 답이 있습니다."모든 렌더 메서드 앞에 호출됩니다."할 때마다setState그render메서드가 호출됩니다.

변수 「」를 하는 것을 합니다.currentMonth ★★★★★★★★★★★★★★★★★」currentYear부모 컴포넌트에 전달하여 다른 3개의 컴포넌트와 함께 지주로서 전달합니다.변경 핸들러를 소품으로 전달하여 자녀로부터 호출할 수도 있습니다.

번째 ★★★★★★★★★★★★★★★★에render-currentMonth ★★★★★★★★★★★★★★★★★」currentYear로 할 수 null디폴트 정보를 표시하는 로직을 가질 수 있습니다. '월명', '월명', '월명', '월명', '', '월명', '월명', '월명', '월명', '월명', '월명', '월명', '월명 '월명', '월명', '월명', '월명', '월명', '월명', '월명', 'changeHandler새로운 소품을 통과시킬 부모로부터., 그럼 이제 ㅇㅇㅇㅇㅇㅇㅇㅇㅇ는요.getderivedstatefromprops 이상 있지 않다currentMonth ★★★★★★★★★★★★★★★★★」currentYear월이 바뀌었음을 알 수 있도록 하기 위해서 입니다.

이 경우(소품 변경에 따라 상태 업데이트), 다음을 사용합니다.

componentDidUpdate(prevProps) {
  // don't forget to compare props
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

componentDidUpdate업데이트될 때마다 호출됩니다(소품 변경/상태 변경으로 인해).해야 한다(by 라서프프 so so so so so so so ( so (( (( (( (( (( (( 。this.props.userID !== prevProps.userID를 참조해 주세요.

아래는 나에게 잘 맞는 것 같았고, 꽤 일반적이다.

생성자:

this.state = {
    props,
    // other stuff
}

gDSFP의 경우:

static getDerivedStateFromProps(newProps, state) {
    if (state.props !== newProps)
        // Compute and return new state relevant to property change
    else
        return state;
}

약간의 실험을 통해 "상태"가 더 이상 자동으로 이전 상태가 아님을 확인했지만, 이 후크 인스턴스에서는 기존 소품과 조합하여 새로 설정된 상태가 됩니다.후크는 gDSFP를 직접 호출하여 소품에 의존하는 복잡한 상태의 진화를 반복하지 않아도 되도록 추가되었을 것입니다.

this.setState(ClassName.getDerivedStateFromProps(this.props, newState))

문제는 이것이 큰 변화는 아니지만 오래된 코드가 get DerivedState From Props에서 불필요하게 많은 계산을 수행할 경우 미묘한 비효율성을 초래할 수 있다는 것입니다.예를 들어 복잡한 물체가 3중으로 제작되고 있다는 것을 알게 되었습니다. 한 번은 실제로 제작되고 두 번은 더 제작되었습니다. 이 새로운 후크 때문에 말이죠.

언급URL : https://stackoverflow.com/questions/51019936/why-getderivedstatefromprops-is-called-after-setstate