reactjs - 使用 ES6 和 ES7 的 ReactJs 中的状态

Question

在许多示例中，我看到要管理 React 组件内部的状态，您必须使用 getInitialState，如本例所示。

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

但是在 ES6 语法中使用 getInitalState() 将不再起作用。那么如何使用 ES6 语法管理 React 组件中的状态呢？

一个例子是

// Future Version
export class Counter extends React.Component {
  static propTypes = { initialCount: React.PropTypes.number };
  static defaultProps = { initialCount: 0 };
  state = { count: this.props.initialCount };
  tick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

谢谢

Answer 1

在 ES6 中，React 团队决定采用一种更惯用的初始化状态的方法，即简单地将其存储在构造函数中设置的实例变量中。这意味着您可以通过将其返回值移动到类构造函数中的 this.state 实例变量来重构您的 getInitialState 方法。

import React, { Component } from 'react';

class LikeButton extends Component {
  constructor() {
    super();
    this.state = { liked : false };
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({
        liked : !this.state.liked
    });
  }

  render() {
    const text = this.state.liked ? 'like' : 'haven\'t liked';

    return (
        <p onClick={this.handleClick}>{`You ${text} this. Click to toggle.`}</p>
    );
  }
}

注意:您必须将方法绑定(bind)到组件实例

在 ES6+ 中你可以使用 Property initializers特点

import React, { Component } from 'react';

class LikeButton extends Component {
  state = {
    liked : false
  }

  render() {
    const text = this.state.liked ? 'like' : 'haven\'t liked';
    const handleClick = ()=>{
      this.setState({
        liked : !this.state.liked
      });
    }

    return (
        <p onClick={this.handleClick}>{`You ${text} this. Click to toggle.`}</p>
    );
  }
}

注意:这是 Stage 0提案。

注意:我删除了构造函数，因此将handleClick定义为render内的嵌套函数

引用文献: React official docs/Article