javascript - 为什么要在react中输出之前的props？

Question

当我在React中使用const { number } = this.props时，我得到了一些令人困惑的东西，请查看控制台，为什么第一次输出时两个数字不同。

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      number: 0
    }
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        number: 9
      })
    }, 1000)
  }
  render() {
    return <Child number={this.state.number} />
  }
}

class Child extends React.Component {
  render() {
    const { number } = this.props
    setTimeout(() => {
      console.log(this.props.number, number) // here, why two numbers is different when first output.
    }, 2000)
    return <h2>please see console, why two numbers in fisrt line in console output is different</h2>
  }
}

ReactDOM.render(
  <App />
, mountNode);

<div id="container" style="padding: 24px"></div>
<script>
  var mountNode = document.getElementById('container');
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

Child组件的render方法会被调用两次，

1. 在 App 初始安装期间，状态编号为 0
2. 然后，App 的 componentDidMount 执行一秒后，state 更改为 number:9。

因此渲染在一秒内被调用两次。在第一个调用中，数字是 0，第二个数字是 9。问题是 console.log 超时 2 秒，到那时 this.props.number 将是 9。

但是控制台日志的第一次执行看到数字是0并且它绑定(bind)到它的关闭。 所以它打印 9 和 0

第二个打印 9 和 9