React.js拒絕注意到更改

Question

似乎在某些情況下，React不會將狀態更改傳播到子組件。

最小例如

我想我觀察到的行爲歸結到最小的測試用例我能找到，但它最終仍是相當大的。對於那個很抱歉。

class Inner extends React.Component<{ value: number }, { value: number }> { 
    constructor(props: { value: number }) { 
    super(props); 

    this.state = { value: props.value }; 
    } 

    render() { 
    return <span> { this.state.value } </span> 
    } 
} 

class Test extends React.Component<{}, { value: number }> { 
    constructor(props: {}) { 
    super(props); 

    this.state = { value: 0 }; 

    setTimeout(() => { this.setState({ value: 1 }); }, 500); 
    } 

    render() { 
    return <span> 
     <Inner value={ this.state.value } /> 
    </span>; 
    } 
} 

React.render(<Test />, document.getElementById('somediv')); 

快速摘要

測試有「值」在它的狀態時，其上顯示通入並顯示由它的內部部件，「內」。

內部測試的構造方法，我在狀態設置value爲0。500毫秒後，我然後將其設置爲1。我預計這將改變內的顯示屏也顯示一個1，因爲它取決於value從this.state，但事實並非如此。爲什麼不？

的非常奇怪的是，如果我改變線return <span> { this.state.value } </span>使用this.props.value內Inner，那麼它實際上做更新。當然，我需要在我的應用程序中使用狀態，我從中提取了這個示例。

我希望我錯過了React的一些基本部分。它是什麼？

Answer 1

Inner的構造函數僅在組件實例首次創建時運行一次。

結果，這是隻運行一次，而不是每一次的道具變化：

this.state = { value: props.value }; 

因此，如果您通過新的道具爲Inner的this.props.value值會發生變化，但this.state.value韓元的價值「T。

眼下這是發生了什麼：

1. 超時呼籲setValue上Test和更新的Test
2. 國家陣營重新呈現Test
3. 作爲Test通過新的渲染過程的一部分道具值Inner
4. Inner重新渲染 - 它的道具已經改變了，但它的狀態還沒有。