this.props был обновлен перед запуском shouldComponentUpdate

Question

У меня есть ClockBlock компонент, в котором я поднял состояние, сохраненный в объекте "timer":

class ClockBlock extends Component {
  constructor(props){
    super(props);
    this.state = { timer: props.timer }; // timer from Redux store
  }

  render(){
    return(
      <div className="clockBlock">
        <Circle timer={this.state.timer} updateTimer={this.updateTimer.bind(this)} />
        <Clock timer={this.state.timer} updateTimer={this.updateTimer.bind(this)} />
        <ClockTerms updateTimer={this.updateTimer.bind(this)} />
      </div>
    )
  }

Все три вложенных компонента влияют друг на друга с помощью функции updateTimer. (кроме компонента ClockTerms - он работает в одном направлении). Функция здесь:

 updateTimer(newDuration){
    const newState = Object.assign( {}, this.state );
    newState.timer.duration = newDuration;
    this.setState( newState );
  }

Итак, проблема - когда я меняю таймер с использованием компонента ClockTerms, я вижу изменения и в компоненте Clock (по-видимому, через реквизит). В то же время в компоненте Circle в функции shouldComponentUpdate я пытаюсь увидеть разницу между старым реквизитом и новым. Вот эта функция:

 shouldComponentUpdate(nextProps, nextState){
    console.log( this.state.timer );
    console.log( nextState.timer );
    console.log( this.props.timer );
    console.log( nextProps.timer );

    return true;
 }

Все вызовы console.log () выводят одинаковые данные - новые реквизиты. Зачем? И как я могу получить старые реквизиты?

PS: я упростил мой код выше, убрав несущественные с моей точки зрения вычисления. Могу дать весь код, если это важно. Я также использую Redux здесь, но мне кажется, что он не очень занят здесь. Большое спасибо заранее!

ОБНОВЛЕНИЕ: я также получаю ту же картинку, когда помещаю ту же самую функцию shouldComponentUpdate в ClockBlock (родительский) компонент;

Answer 1

Дело в том, что updateTimer срабатывает ДО shouldComponentUpdate запуска. Вот и все. Поэтому, когда вы обновляете свое поднятое состояние в родительском компоненте из дочерних компонентов (через функцию, переданную в props), имейте в виду, что shouldComponentUpdate получит уже измененное состояние и props.