Question

我是React的新手，仍然在努力学习如何更新道具以及在哪种生命周期方法中进行更新。下面是我写的一些代码：

export default Parent extends Component {
   constructor(props) {
    super(props);
    this.state = {
      name: "Tom"
    }
  }

  changeName = () => {
    this.setState({ name: "Jerry" });
  }

  render() {
    return <div>
             <Child name={this.state.name}/>
             <button onClick={this.changeName }>Change Name</button>
          </div>
  }
}


export default Child extends Component {
  ...
  shouldComponentUpdate(newProps, newState) {
     console.log("old name is" + this.props.name)
     console.log("new name is" + newProps.name)
     return true;
  }

  render() {
     return <p>{this.props.name}</p>
  }
}

当我单击按钮时，段落的内容从“汤姆”更改为“杰里”，这是预期的，但是如果我稍加挖掘，控制台将显示：

旧名字叫汤姆

新名字叫杰里

我的问题是，单击按钮后，在Child组件内部，this.props.name仍然是Tom，这意味着this.props不是最新的道具，而在里面render()函数，this.props.name变成Jerry，这意味着this.props是最新的道具。

旧的道具何时更改为最新的道具？ shouldComponentUpdate()之后还有另一种生命周期方法，实际上将this.props更改为最新的道具，例如：

afterShouldComponentUpdate(newProps, newState){
   ...
   this.props = newProps;
}

是否存在这样的生命周期方法？我知道名称不匹配，但是有没有一种可以实现上述功能的生命周期方法？

Answer 1

不，没有这样的lifecycle method。

在生命周期方法之间（在this之后，shouldComponentUpdate之前），render的道具分配工作正在发生，并且没有 public 接口如何您可以干预该过程。

儿童道具如何更新？

1 个答案: