componentWillReceiveProps가 아닌 라이프 사이클 메서드 getDerivedStateFromProps를 사용하는 방법

componentWillReceiveProps가 아닌 라이프 사이클 메서드 getDerivedStateFromProps를 사용하는 방법

이 모양은componentWillReceiveProps새로운 라이프 사이클 방식을 위해 향후 출시에서는 완전히 폐지될 예정입니다.getDerivedStateFromProps: static get Derived State From Props().

검사한 결과, 당신은 이제 직접 비교할 수 없는 것 같습니다.this.props그리고.nextProps할 수 있는 것처럼componentWillReceiveProps다른 방법이 없을까요?

또한 오브젝트를 반환합니다.수익률은 기본적으로 다음과 같은 것으로 가정하는 것이 맞습니까?this.setState?

다음은 온라인에서 찾은 예입니다.소품/상태에서 파생된 상태.

전에

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그리고.componentDidUpdate이행의 예에 대해서는, React 블로그의 투고를 참조해 주세요.네, 반환된 오브젝트는getDerivedStateFromProps전달된 개체와 마찬가지로 상태를 업데이트합니다.setState.

프로포트의 오래된 가치가 정말로 필요한 경우 다음과 같은 방법으로 언제든지 캐슁할 수 있습니다.

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 블로그에 게시한 바와 같이, 대부분의 경우 전혀 필요하지 않습니다.

파생 데이터만 계산하려면 다음 중 하나를 수행합니다.

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);
    // ...
  }
}

자세한 내용은 블로그 투고의 이 섹션을 참조하십시오.

댄 아브라모프가 말한 바와 같이

렌더 내부에서 올바르게 실행

우리는 실제로 메모와 함께 어떤 종류의 대리 소품에도 그 방법을 사용해 계산을 표현합니다.

우리의 코드는 이렇게 보인다.

// ./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또한 생성자 내에서 복사/복사 초기화를 건너뛸 수 있습니다.

주의:

이 접근법은 내부 상태 논리가 있는 경우 컴포넌트 라이프 사이클에서 처리해야 할 경우 소품을 스테이트로 프록시하는 경우에만 사용됩니다.

렌더링 전 상태를 업데이트하고 소품 조건으로 업데이트하려는 경우 항상 GetDerivedStateFromProps가 사용됩니다.

소품 값을 사용하여 Stats 값을 갱신하는 Get Derived State From Propd

https://www.w3schools.com/REACT/react_lifecycle.asp#:~:text=마운트%20/%20 컴포넌트, 마운트%2C%20 업데이트%2C%20 및 %20 마운트 해제.

언급URL : https://stackoverflow.com/questions/49617486/how-to-use-lifecycle-method-getderivedstatefromprops-as-opposed-to-componentwill