Question

我试图在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} />);
  }
}

这不会更新渲染的输出（它总是count: 0），但会输出日志：

Creating app
Rendering app 0
Creating sub component
Rendering sub component 0
Rendering app 1
Rendering sub component 0
Rendering app 2
Rendering sub component 0
Rendering app 3
Rendering sub component 0
...

这是一个JSFiddle：http://jsfiddle.net/jor0xu1a/1/

我知道示例SubComponent并不需要状态，但我尝试尽可能简单地显示我的问题。

我错过了什么？

Answer 1

在SubComponent中，props没有状态 - 将其更改为this.props.count，这将有效

Answer 2

我建议您阅读Props in getInitialState Is an Anti-Pattern。

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

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

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

Answer 3

你的SubComponent应该是：

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

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

Answer 4

我的不好，我认为构造函数（或ES5的getInitialState）在父组件重新呈现组件时被调用（我认为父级'在渲染时'重新创建'子组件）但情况并非总是如此。我应该阅读它（url）并尝试使用ES5（jsFiddle），然后再认为这是我对ES6不理解并在此处创建问题。

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

感谢您的反馈！

如何使用ES6将状态保存在React组件中

4 个答案: