Javascript 为什么道具在渲染中显示不同的值，而组件将接收道具？

你能告诉我吗 为什么道具在渲染中显示不同的值，而组件将接收道具？当我点击

按钮

时，它调用函数渲染和组件将接收道具，但它显示不同的（this.props.val）值为什么

这是代码

类应用程序扩展组件{
更新（）{
render（，document.getElementById（'root'））；
}
组件将接收道具（下一步）{
console.log（nextrops.val）；
console.log（“==================================”）；
console.log（this.props.val，“val”）；
}
render（）{
console.log（“渲染========”）
console.log（this.props.val，“val render”）；
返回(
{this.props.val}
开始编辑以查看发生的奇迹{'\u2728'}
)

顾名思义，

组件将在任何属性值发生更改时触发
接收props
，组件将在
nextrops
集合中接收它。因此，此事件将查找更改的值并用新值更新组件的props集合。只有在该事件发生后，
render
才会执行，从而使perfec我没有感觉

更多详情：

componentWillReceiveProps
在组件实际收到这些新道具之前运行，这会触发重新渲染并更改
this.props.val
的值。有关详细信息，请查看for
componentWillReceiveProps
。
class App extends Component {
  update(){
    render(<App val={this.props.val + 1 }/>, document.getElementById('root'));

  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps.val);
     console.log("====================");
      console.log(this.props.val,"val");

  }
  render(){
    console.log("render========")
          console.log(this.props.val,"val render");

    return (

  <div style={styles}>
    <button onClick={this.update.bind(this)}>{this.props.val}</button>
    <h2>Start editing to see some magic happen {'\u2728'}</h2>
  </div>
)