Как использовать метод жизненного цикла getDerivedStateFromProps вместо componentWillReceiveProps

Об удалении 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,, в подавляющем большинстве случаев вам вообще не нужен 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);
    // ...
  }
}

Ознакомьтесь с этот раздел сообщения в блоге, чтобы узнать больше.

Как сказал Дан Абрамов

Do it right inside render

На самом деле мы используем этот подход с memoise one для любого типа прокси для констатации вычислений.

Наш код выглядит так

// ./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 используется всякий раз, когда вы хотите обновить состояние перед рендерингом и обновить состояние реквизита.

GetDerivedStateFromPropd обновляет значение статистики с помощью значения props

прочтите https://www.w3schools.com/REACT/react_lifecycle.asp#:~:text=Lifecycle%20of%20Components,Mounting%2C%20Updating%2C%20and%20Unmounting.