Зачем использовать getDerivedStateFromProps, когда у вас есть componentDidUpdate?

Question

Я запутался в новом жизненном цикле реакции 16, сценарии использования getDerivedStateFromProps. Например, приведенный ниже код, getDerivedStateFromProps вообще не нужен, так как я могу добиться того, чего хочу, с помощью componentDidUpdate.

export class ComponentName extends Component {
  //what is this for?
  static getDerivedStateFromProps(nextProps, prevState) {

    if (nextProps.filtered !== prevState.filtered && nextProps.filtered === 'updated') {
      return {
        updated: true //set state updated to true, can't do anything more?
      };
    }

    return null;

  }

  componentDidUpdate(prevProps, prevState) {
    if(prevProps.filtered !== this.state.filtered && this.state.filtered === 'updated'){
      console.log('do something like fetch api call, redirect, etc..')
    }
  }

  render() {
    return (
      <div></div>
    );
  }
}

Answer 1

С этой статьи :

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

Что такое статический метод? Статический метод - это метод / функция, которая существует в классе, а не в его экземпляре. Самое простое различие, о котором следует подумать, это то, что у статического метода нет доступа к нему, а перед ним ключевое слово static.

Хорошо, но если функция не имеет доступа к этому, как мы можем вызвать this.setState? Ответ - мы не делаем. Вместо этого функция должна возвращать обновленные данные о состоянии, или ноль, если обновление не требуется

Возвращаемое значение ведет себя подобно текущему значению setState - вам нужно только вернуть часть состояния, которая изменяется, все остальные значения будут сохранены.

Вам все еще нужно объявить начальное состояние компонента (либо в конструкторе, либо в виде поля класса).

getDerivedStateFromProps вызывается как при первоначальном монтировании, так и при повторном рендеринге компонента, поэтому его можно использовать вместо создания состояния на основе реквизитов в конструкторе.

Если вы объявите getDerivedStateFromProps и componentWillReceiveProps, будет вызван только getDerivedStateFromProps, и вы увидите предупреждение в консоли.

Обычно вы используете обратный вызов, чтобы убедиться, что какой-то код вызывается при фактическом обновлении состояния - в этом случае, пожалуйста, используйте componentDidUpdate.

Answer 2

С помощью componentDidUpdate вы можете выполнять обратные вызовы и другой код, который зависит от состояния, которое обновляется.

getDerivedStateFromProps является статической функцией и поэтому не имеет доступа к ключевому слову this. Также у вас не будет никаких обратных вызовов, так как это не метод жизненного цикла на основе экземпляра. Кроме того, инициирование изменений состояния может привести к возникновению петель (например, при вызовах с избыточностью).

Они оба служат разным фундаментальным целям. Если это помогает, getDerivedStateFromProps заменяет componentWillReceiveProps.