Как правильно использовать методы shouldComponentUpdate () и componentWIllUpdate () в ReactJs?

Question

Раньше я использовал componentWillReceiveProps для обновления локального объекта моего компонента после получения данных из redux.

componentWillReceiveProps(nextProps) {
    if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
        this.setState({user:{
          name:nextProps.editUser.name,
          email:nextProps.editUser.email,
        }}, function(){
          this.setState({addModalUserEdit:true});
        });
    }
}

Но теперь я хочу использовать shouldComponentUpdate и componentWillUpdate, как в документации по реакции в соответствии с жизненным циклом реакции.

shouldComponentUpdate(nextProps, nextState){
    if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
      return true;
    }
    return false;
}

componentWillUpdate(nextProps, nextState) {
    if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
        this.setState({user:{
          name:nextProps.editUser.name,
          email:nextProps.editUser.email,
        }}, function(){
          this.setState({addModalUserEdit:true});
        });
    }
}

но я генерирую ошибку как

"Превышена максимальная глубина обновления. Это может происходить, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений допредотвратить бесконечные циклы. "

Пожалуйста, объясните мне, что я делаю неправильно, чтобы понять жизненный цикл реакции.

Заранее спасибо.

Answer 1

shouldComponentUpdate() вызывается перед рендерингом при получении новых реквизитов или состояний.

  shouldComponentUpdate (nextProps) {
     return nextProps !== this.props
  }

componentDidUpdate() вызывается сразу после состояния обновления.

Оба метода не вызываются дляначальный рендер.

Answer 2

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

componentDidUpdate будет инициировано при обновлении на выходе компонента.

shoudComponentUpdate принять 2 аргумента, nextProps и nextState.который содержит новое обновление реквизита и состояния.и возвращая логическое значение.

Answer 3

shouldComponentUpdate запускается перед обновлением до состояния (), поэтому оно дает вам nextState в качестве свойства ), поэтому при выполнении теста с state вам необходимо использоватьnextState.

shouldComponentUpdate(nextProps, nextState){
    if (nextProps.editUser && !nextProps.loading && !isEqual(nextState.user, nextProps.editUser)){
      return true;
    }
    return false;
}

Имейте в виду, однако, что рекомендуется не выполнять глубокую проверку на равенство в shouldComponentUpdate, поскольку это ухудшит производительность.

Кроме того, componentWillUpdate - это ( в последних версиях ), который называется UNSAFE_componentWillUpdate, и в нем говорится

Обратите внимание, что вы не можете вызвать this.setState() здесь;вы также не должны делать ничего другого (например, отправлять действие Redux), которое вызовет обновление компонента React до того, как UNSAFE_componentWillUpdate () вернет.

---

Предлагаемый метод заключается в использовании componentDidUpdate.