Question

你可以告诉我吗？为什么道具在渲染和componentWillReceiveProps中显示不同的值？当我点击button时，它会调用函数 render和componentWillReceiveProps ，但它显示（this.props.val）的不同值为什么？

这是代码 https://codesandbox.io/s/g5119XP2Z

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

Answer 1

顾名思义，ComponentWillReceiveProps会在更改任何属性值时触发，组件将在nextProps集合中接收它。因此，此事件查找更改的值并使用新值更新组件的props集合。只有在render执行之后才有意义。

更多详情：

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/component_will_receive_props.html

为什么道具在渲染和componentWillReceiveProps中显示不同的值？

1 个答案: