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

在课堂上绑定构造函数或胖箭头

1 个答案: