componentWillReceiveProps와 달리 라이프 사이클 메소드 getDerivedStateFromProps를 사용하는 방법

마치 componentWillReceiveProps완전히 새로운 라이프 사이클 방식에 찬성, 오는 릴리스에서 단계적으로 될 것입니다 getDerivedStateFromProps: 정적 getDerivedStateFromProps를 () .

검사 한 결과 this.props와 nextProps에서 직접 님과 직접 비교할 수없는 것 같습니다 componentWillReceiveProps. 이 주위에 어떤 방법이 있습니까?

또한 이제 객체를 반환합니다. 반환 값이 본질적으로 있다고 가정하는 것이 맞 this.setState습니까?

아래는 온라인에서 찾은 예 입니다. States props / state에서 파생되었습니다 .

전에

class ExampleComponent extends React.Component {
  state = {
    derivedData: computeDerivedState(this.props)
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.someValue !== nextProps.someValue) {
      this.setState({
        derivedData: computeDerivedState(nextProps)
      });
    }
  }
}

후

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {};

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someMirroredValue !== nextProps.someValue) {
      return {
        derivedData: computeDerivedState(nextProps),
        someMirroredValue: nextProps.someValue
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

제거 정보 componentWillReceiveProps: getDerivedStateFromProps및 의 조합으로 사용을 처리 할 수 ​​있어야 합니다. 마이그레이션 예 는 React 블로그 게시물 을 componentDidUpdate참조하십시오 . 그리고 네에 의해 반환 된 객체는에 전달 된 객체와 유사하게 상태 를 업데이트합니다 .getDerivedStateFromPropssetState

소품의 오래된 가치가 정말로 필요한 경우 항상 다음과 같은 상태로 소품을 캐시 할 수 있습니다.

state = {
  cachedSomeProp: null
  // ... rest of initial state
};

static getDerivedStateFromProps(nextProps, prevState) {
  // do things with nextProps.someProp and prevState.cachedSomeProp
  return {
    cachedSomeProp: nextProps.someProp,
    // ... other derived state properties
  };
}

상태에 영향을주지 않습니다 아무것도에 넣어 수 있습니다 componentDidUpdate, 심지어 거기에 getSnapshotBeforeUpdate매우 낮은 수준의 물건.

업데이트 : 새로운 (그리고 오래된) 라이프 사이클 방법에 대한 느낌을 얻으려면 react-lifecycle-visualizer 패키지가 도움이 될 수 있습니다.

우리는 다음과 같이 최근에 게시 된 블로그 반응 , 대부분의 경우에 필요하지 않은 getDerivedStateFromProps전혀 .

일부 파생 데이터 만 계산하려면 다음 중 하나를 수행하십시오.

1. 바로 해봐 render
2. 또는 다시 계산하는 데 비용이 많이 드는 경우와 같은 메모 도우미를 사용하십시오 memoize-one.

가장 간단한 "후"예는 다음과 같습니다.

import memoize from "memoize-one";

class ExampleComponent extends React.Component {
  getDerivedData = memoize(computeDerivedState);

  render() {
    const derivedData = this.getDerivedData(this.props.someValue);
    // ...
  }
}

자세한 내용 은 블로그 게시물의이 섹션을 확인하십시오 .

Dan Abramov가 언급했듯이

렌더링 내에서 바로 수행

우리는 실제로 그 계산 방식을 상태 계산에 대한 모든 종류의 프록 싱 소품에 대해 메모와 함께 사용합니다.

우리의 코드는 이런 식으로 보인다

// ./decorators/memoized.js  
import memoizeOne from 'memoize-one';

export function memoized(target, key, descriptor) {
  descriptor.value = memoizeOne(descriptor.value);
  return descriptor;
}

// ./components/exampleComponent.js
import React from 'react';
import { memoized } from 'src/decorators';

class ExampleComponent extends React.Component {
  buildValuesFromProps() {
    const {
      watchedProp1,
      watchedProp2,
      watchedProp3,
      watchedProp4,
      watchedProp5,
    } = this.props
    return {
      value1: buildValue1(watchedProp1, watchedProp2),
      value2: buildValue2(watchedProp1, watchedProp3, watchedProp5),
      value3: buildValue3(watchedProp3, watchedProp4, watchedProp5),
    }
  }

  @memoized
  buildValue1(watchedProp1, watchedProp2) {
    return ...;
  }

  @memoized
  buildValue2(watchedProp1, watchedProp3, watchedProp5) {
    return ...;
  }

  @memoized
  buildValue3(watchedProp3, watchedProp4, watchedProp5) {
    return ...;
  }

  render() {
    const {
      value1,
      value2,
      value3
    } = this.buildValuesFromProps();

    return (
      <div>
        <Component1 value={value1}>
        <Component2 value={value2}>
        <Component3 value={value3}>
      </div>
    );
  }
}

그것의 이점은 비교 보일러 내부의 코드 톤이 필요하지 않는 것이 있습니다 getDerivedStateFromProps또는 componentWillReceiveProps당신이 생성자 내부 초기화 복사 - 붙여 넣기 건너 뛸 수 있습니다.

노트:

이 접근 방식은 소품을 상태로 프록시하는 데만 사용됩니다. 내부 상태 논리가있는 경우 여전히 구성 요소 수명주기에서 처리해야합니다.