ComponentDidUpdate и prevState

Question

Вот сценарий.У меня есть родительский компонент, с дочерним компонентом.Родительский компонент выполняет ajax-вызовы и передает данные дочернему элементу.

Когда дочерний компонент получает новые данные, в componentDidUpdate (дочернего элемента) я повторно устанавливаю его внутреннее состояние.

componentDidUpdate(prevProps, prevState) { 

    if ( prevProps.myRow !== this.props.myRow ) { //check for when new data is passed into this component from its parent / container...
            this.setState({
                editableRowObj    : this.props.myRow    //... only then I should bother updating the state with the new data passed in.         
            })
    }
}

Я не могу вспомнить сценарий, в котором внутри componentDidUpdate (дочернего элемента) мне нужно будет проверить

prevState! == this.state

Это потому, что когдаЯ передаю новые данные в дочерний компонент, this.state будет равно prevState (который будет старым состоянием до получения новых данных);т. е. до тех пор, пока я не запустил вышеупомянутый setState, предыдущее и текущее состояния останутся прежними.

Следовательно, мой вопрос заключается в том, при каких сценариях мне нужно проверять prevState! = this.state?

Answer 1

Нет смысла сравнивать состояния как есть, так как они никогда не будут одинаковыми.То, что вы сравниваете таким образом, это ссылки на состояние, а не вложенные значения.Кроме того, вы должны быть осторожны с этой функцией, и использование setState внутри componentDidUpdate считается антипаттерном и не рекомендуется - есть даже правило ESlint , которое предписывает не делать этого.

Один из сценариев сравнения состояний (или реквизитов) находится в функции shouldComponentUpdate(nextProps, nextState), в которой вы решаете, должен ли компонент обновляться или нет (возвращает логическое значение).

Answer 2

Тот же сценарий, который применяется к реквизиту, может применяться к реквизиту.Может случиться так, что при изменении состояния вам нужно вызвать вызов API для получения данных.Теперь вы можете решить вызвать функцию в обратном вызове setState, но если одно и то же состояние изменяется из нескольких мест, тогда componentDidUpdate - хорошее место.