通过props来初始化子组件的状态是否正确?

Is it correct to initialize state of child component via props?

本文关键字：是否 状态 组件 props 初始化 通过      更新时间：2023-09-26

我需要从父组件初始化子组件的状态。所以我用下面的方法来做:

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的值(例如，通过一些用户交互)。因为state上的某个值应该是某个instance variable，其值可能会根据组件的状态而变化。但需要注意的是，改变state.timer的值不会改变timer的值。

如果你不想在组件中改变this.state.timer的值，你可以这样使用它:

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

注意:这并不是一个真正针对react的技巧，因为这种反模式通常会出现在代码中;在这种情况下，React只是更清楚地指出它们。

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

在任何可能的情况下，动态计算值以确保它们不会在以后失去同步并引起维护问题。

相关文章：