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的提示，因为这种反模式通常会出现在代码中;在这种情况下，React只是更清楚地指出它们。

使用道具在getInitialState中生成状态通常会导致duplication "source of truth"，即真实数据的位置。这是因为只有在首次创建组件时才会调用getInitialState。

尽可能即时计算值，以确保它们以后不会失去同步并导致维护问题。

通过道具初始化子组件的状态是否正确？

2 个答案: