所以我想知道这之间是否有区别：

import React, { Component, PropTypes } from 'react';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page : 1
    };
  }

  nextPage = () => {
    this.setState({ page: this.state.page + 1 });
  }

  previousPage= () => {
    this.setState({ page: this.state.page - 1 });
  }

  render() {
    const { page } = this.state;
    return (
      <div>
        <H1>{page}</H1>
        <Button onClickPrevious={this.previousPage} onClickNext={this.nextPage} />}
      </div>
    );
  }
}

要么

import React, { Component, PropTypes } from 'react';

class Example extends Component {   
    constructor(props) {
         super(props);
         this.nextPage = this.nextPage.bind(this);
         this.previousPage = this.previousPage.bind(this);
         this.state = {
              page: 1
             };
  }

  nextPage() {
    this.setState({ page: this.state.page + 1 });   }

  previousPage() {
    this.setState({ page: this.state.page - 1 });   }

  render() {
    const { page } = this.state;
    return (
      <div>
        <H1>{page}</H1>
        <Button onClickPrevious={this.previousPage} onClickNext={this.nextPage} />}
      </div>
    );   
  }
}

我想知道每个功能的性能是否相同还是还有其他好处？

进一步阅读(https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.khf30fuaq)

解决方法:

绑定事件处理程序的最佳位置是构造函数.这样,事件处理程序将其上下文绑定到组件实例.您可以访问属性和状态,并从此类绑定处理程序调用setState或forceUpdate.

使用箭头功能绑定也有自己的优势.
箭头函数始终从定义它们的位置获取上下文.因此,实际上,此示例等效于：

箭头函数语法是一种使用如下语法定义函数的方法：

change = (ev) => this.setState({ text: ev.target.value });

比编写function(ev){….}语句更简洁.如果您在=>之后没有提供{和}括号,箭头,该函数是一个立即返回的表达式.因此,此结果类似于：

change = function(ev) { return this.setState({ text: ev.target.value }); }.bind(this);

因此.bind()和arrow函数都会导致创建新函数

最后,绑定功能的方式取决于用例.

有关更多详细信息,您可以阅读this文章：