通過道具初始化子組件的狀態是否正確？

Question

我需要初始化父組件的狀態。所以我用下面的方法來做：

var Timer = React.createClass({ 
    getInitialState: function() { 
      return {timer: this.props.timer}; 
    }, 
    render() { 
      return <div>{this.state.timer}</div> 
    } 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
      return {timer: 1000}; 
    }, 
    render() { 
      return <Timer timer={this.state.timer}> 
    } 
}); 

用這種方式初始化Timer組件的狀態是否正確？

Answer 1

我認爲這樣做很好。

就你而言，我假定你將在組件內部改變timer的值（比如，通過一些用戶交互）。因爲state上的值應該是instance variable，其值可能會更改以反映組件狀態。 但需要注意的是，更改state.timer的值不會改變外部的timer值。

如果你不改變組件內部的this.state.timer值，你可以使用它像：

render() { 
     return <div>{this.props.timer}</div> 
} 

Answer 2

注： 這是不是一個真正的陣營特有的尖，因爲這種反模式通常在代碼中出現;在這種情況下，React只是更清楚地指出它們。

使用的道具在getInitialState生成狀態往往導致的"source of truth"duplication，即，其中實際數據是。這是因爲只有在第一次創建組件時纔會調用getInitialState。

只要有可能，即時計算值以確保它們稍後不會失去同步並導致維護故障。