儿童道具如何更新？

Question

I'm new to React, still struggling to learn how props get updated and in which lifecycle methods the update takes place. Below is some code I wrote:

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

When I click the button, the content of paragraph changes from "Tom" to "Jerry", which is expected, but if I dig a little bit, the console showed that:

old name is Tom

new name is Jerry

My question is, after I click the button, inside the Child component, this.props.name is still Tom , which means this.props is not the latest props, while inside the render() function, this.props.name becomes Jerry , which means this.props is the latest prop.

When did the old prop change to the latest prop? Is there another lifecycle method after shouldComponentUpdate() that actually changes this.props to the latest props, for example:

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

Does such a lifecycle method exist? I know the name won't match, but is there a lifecycle method that accomplishes the above functionality?

Answer 1

No, there is no such lifecycle method .

Assignment of props to this is happening BETWEEN lifecycle methods (after shouldComponentUpdate , before render ) by the library itself and there is no public interface how you can interfere with the process.