Реагирование реквизита только при рендеринге при повторном рендеринге

Question

Когда я пытаюсь перепрофилировать компонент реакции с различными реквизитами по сравнению с первоначальным рендером, я могу видеть только обновленные значения поддержки при вызове рендера. Все предыдущие методы жизненного цикла возвращают старое значение prop.

Например, следующий код ...

componentWillReceiveProps() { 
    console.log("componentWillReceiveProps"); 
    console.log(this.props.calls); 
} 

shouldComponentUpdate() { 
    console.log("shouldComponentUpdate"); 
    console.log(this.props.calls); 
    return true; 
} 

componentWillUpdate() { 
    console.log("componentWillUpdate"); 
    console.log(this.props.calls); 
} 

componentDidUpdate() { 
    console.log("componentDidUpdate"); 
    console.log(this.props.calls); 
} 

render() { 
    console.log("render"); 
    console.log(this.props.calls); 
} 

когда rerendered с новыми реквизита вернутся ...

componentWillReceiveProps 
oldProp 
shouldComponentUpdate 
oldProp 
componentWillUpdate 
oldProp 
render 
newProp 
componentDidUpdate 
newProp 

Кто-нибудь знает, почему это происходит, и посоветовать, как я могу получить обновленная поддержка перед рендерингом?

Answer 1

The Life Cycle методы, которые являются частью процесса обновления (componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate) произойдет до того, как фактические реквизита обновляются. Чтобы получить новые реквизиты, например, чтобы проверить, должен ли компонент обновляться в shouldComponentUpdate, реакция передает новый реквизит в качестве параметров для метода.

Так, чтобы получить новые подпорки, вам нужно сделать, это:

componentWillReceiveProps(nextProps) { 
    console.log("componentWillReceiveProps"); 
    console.log(nextProps.calls); 
} 

shouldComponentUpdate(nextProps) { 
    console.log("shouldComponentUpdate"); 
    console.log(nextProps.calls); 
    return true; 
} 

componentWillUpdate(nextProps) { 
    console.log("componentWillUpdate"); 
    console.log(nextProps.calls); 
} 

componentDidUpdate() { 
    console.log("componentDidUpdate"); 
    console.log(this.props.calls); 
} 

render() { 
    console.log("render"); 
    console.log(this.props.calls); 
} 

Answer 2

Новые реквизиты будут в параметрах указанных функций.

E.g. componentWillReceiveProps(newProps)

• this.props являются старыми подпорками
• newProps являются новыми опорами.

Обновление: componentWillReceiveProps

void componentWillReceiveProps(
    object nextProps 
) 

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

Используйте это как возможность реагировать на переход prop, прежде чем render() вызывается путем обновления состояния с помощью this.setState(). Доступ к старым реквизитам можно получить через this.props. Вызов this.setState() внутри этой функции не вызовет дополнительный рендеринг.

Те же самые работы для других методов.

Пожалуйста, проверьте docs for details