reactjs - React - 为什么本例中不需要绑定(bind) this ？

Question

尝试了解 React 的基础知识。

查看本页上的第二个示例:https://facebook.github.io/react/我看到tick() 函数设置了Timer 类的状态，将之前的值增加一。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }

  tick() {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
}

ReactDOM.render(<Timer />, mountNode);

但是，当我尝试实现自己的简单 Counter 类时，它失败了，并收到控制台错误，提示 无法读取未定义的属性 setState。

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {count: 0};
    }

    increment(prevState) {
        this.setState((prevState) => ({
            count: prevState.count + 1
        }));
    }

  render() {
    return (
            <div className="main">
                <button onClick={this.increment}>{this.state.count}</button>
            </div>
    )
  }
}

一些谷歌搜索显示我必须将其绑定(bind)到增量函数。但为什么我看到的第一个例子中不需要这样做？我将代码复制到 CodePen，它在 React 15.3.1 上运行良好，我在该示例中找不到任何类似于绑定(bind)的内容。只有在构造函数中添加绑定(bind)代码之后，事情才开始在我的示例中工作。

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {count: 0};

        // THIS ONE LINE FIXED THE ISSUE
        this.increment = this.increment.bind(this);
    }

    increment(prevState) {
        this.setState((prevState) => ({
      count: prevState.count + 1
    }));
    }

  render() {
    return (
            <div className="main">
                <button onClick={this.increment}>{this.state.count}</button>
            </div>
    )
  }
}

Answer 1

回答您的问题:第一个示例使用箭头函数，它自动执行 context binding 。来自文档:

An arrow function does not create its own this context, so this has its original meaning from the enclosing context.

React 中确实有一些绑定(bind)方式:

1) 你可以 bind构造函数中的所有函数，就像您所说的:

constructor(props) {
    /* ... */
    this.increment = this.increment.bind(this);
}

2) 使用箭头函数调用回调:

<button onClick={(e) => this.increment(e)}>

3) 附加 .bind每次将其设置为回调时，在方法引用的末尾，如下所示:

<button onClick={this.increment.bind(this)}>

4) 在您的类中，使用箭头函数定义方法:

increment = (e) => {
  /* your class function defined as ES6 arrow function */
}

/* ... */

<button onClick={this.increment}>

为了在 babel 中使用此语法，您必须启用此 plugin或使用stage-2预设。