在类中的构造函数或胖箭头中绑定

Question

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

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)

Answer 1

绑定事件处理程序的最佳位置是您的constructor。这样，您的事件处理程序将其上下文绑定到组件实例。您可以访问 props and state 并从此类绑定处理程序调用 setState 或 forceUpdate。

与arrow 函数绑定也有自己的优势。 箭头函数总是从它们被定义的地方获取上下文。所以其实这个例子等价于：

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

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文章：