Question

当我在React中使用const { number } = this.props之类的时候，我得到了一些很有意思的东西，请看控制台，为什么第一次输出时两个数字不同。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

Child组件的渲染方法将被调用两次，

在App的初始装载期间，状态编号为0
然后在App componentDidMount执行一秒后，状态更改为数字：9。

因此渲染在一秒间隙内被调用两次。在第一个呼叫号码是0，第二个号码是9.问题是你在2秒内超时console.log，到那时this.props.number将是9。

但是控制台日志的第一次执行看到该数字为0并且它被绑定到绑定。所以它打印9和0

第二个打印9和9

为什么输出以前的道具反应？

1 个答案: