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);
}

当用新道具重新渲染时会返回......

componentWillReceiveProps
oldProp
shouldComponentUpdate
oldProp
componentWillUpdate
oldProp
render
newProp
componentDidUpdate
newProp

有谁知道为什么会这样，并建议我如何在渲染之前获得更新的道具？

Answer 1

更新过程中的Life Cycle方法（componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate）会在实际道具更新之前发生。要获取新道具，例如检查组件是否应在shouldComponentUpdate中更新，react会将新道具作为参数传递给方法。

所以要获得新道具，你需要这样做：

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
)

组件接收新道具时调用。初始渲染不会调用此方法。

使用this作为通过使用this.setState（）更新状态来调用render（）之前对prop转换作出反应的机会。可以通过this.props访问旧道具。在此函数中调用this.setState（）不会触发额外的渲染。

同样适用于其他方法。

请检查docs for details

React props仅在重新渲染时更新渲染

2 个答案: