Javascript 如何使用ES6保持React组件中的状态

我试图在ES6中使用一个有状态的React组件，但是当我定义一个构造函数时，该构造函数将只被调用一次，而该组件将被呈现多次（从其父级）。示例如下所示

class SubComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log("Creating sub component");
    this.state = { count: props.count };
  }

  render() {
    console.log("Rendering sub component", this.state.count);
    return (<div>count: {this.state.count}</div>);
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log("Creating app");
    this.state = { count: 0 };
    this.tick = this.tick.bind(this);
    setInterval(this.tick, 1000);
  }

  tick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    console.log("Rendering app", this.state.count);
    return (<SubComponent count={this.state.count} />);
  }
}

下面是一个JSFIDLE：

我知道示例

子组件

不需要状态，但我尝试使其尽可能简单以显示我的问题

---

我缺少什么？

在子组件中，它是

道具

非状态-将其更改为

this.props.count

，这将起作用在子组件中，它是

道具

非状态-将其更改为

this.props.count

，这将起作用您的子组件应该是：

 class SubComponent extends React.Component {
      constructor(props) {
        super(props);
        console.log("Creating sub component");
      }

      render() {
        return (<div>count: {this.props.count}</div>);
      }
    }

类子组件扩展了React.Component{
建造师（道具）{
超级（道具）；
console.log（“创建子组件”）；
}
render（）{
返回（计数：{this.props.count}）；
}
}

您的子组件应该是：

 class SubComponent extends React.Component {
      constructor(props) {
        super(props);
        console.log("Creating sub component");
      }

      render() {
        return (<div>count: {this.props.count}</div>);
      }
    }

类子组件扩展了React.Component{
建造师（道具）{
超级（道具）；
console.log（“创建子组件”）；
}
render（）{
返回（计数：{this.props.count}）；
}
}

我建议阅读

基本上，应该尽可能少的组件具有状态。正如其他答案所说，在您的情况下，您可以使用

this.props.count

来引用当前值。似乎没有任何理由说明

子组件应该有自己的状态

但是，如果您真的想根据组件接收到的道具计算组件的状态，则您有责任使用生命周期方法使它们保持同步：

我建议你读书

基本上，应该尽可能少的组件具有状态。正如其他答案所说，在您的情况下，您可以使用
this.props.count
来引用当前值。似乎没有任何理由说明
子组件应该有自己的状态

但是，如果您真的想根据组件接收到的道具计算组件的状态，则您有责任使用生命周期方法使它们保持同步：

糟糕的是，我认为每当父级重新呈现组件时（我认为父级在呈现时“重新创建”其子级），就会调用构造函数（或者ES5的
getInitialState
），但情况并非总是如此。在我认为这是我在ES6中不理解的东西并在这里提出问题之前，我应该仔细阅读它（）并尝试使用ES5（）

是的，示例
子组件
应该使用
this.props
，但是我的用例在我真正的组件中具有实际的有状态功能。我创建了一个示例，因为我认为在使用ES6时，结果不是预期的结果（但确实如此）

感谢您的反馈
 My bad，我认为每当父级重新渲染组件时（我认为父级在渲染时“重新创建”其子级），就会调用构造函数（或ES5的
getInitialState
），但情况并非总是如此。在我认为这是我在ES6中不理解的东西并在这里提出问题之前，我应该仔细阅读它（）并尝试使用ES5（）

是的，示例
子组件
应该使用
this.props
，但是我的用例在我真正的组件中具有实际的有状态功能。我创建了一个示例，因为我认为在使用ES6时，结果不是预期的结果（但确实如此）

感谢您的反馈
 如果我以前看过你的帖子，我会把我的答案贴在这里：）是的，我错误地认为父母总是在重新渲染时重新创建自己的孩子<代码>组件将收到道具
解决了我的难题，谢谢你的帮助！如果我以前看过你的帖子，我会把我的答案贴在这里：）是的，我错误地认为父母总是在重新渲染时重新创建自己的孩子<代码>组件将收到道具

解决了我的难题，谢谢你的帮助！

componentWillReceiveProps(nextProps) {
    this.setState({count: nextProps.count});
}