react中这几种定义函数的方式,有什么区别呢?

Question

// 写法一export default class App extends React.Component {    tableHeader = () => {};}// 写法二export default class App extends React.Component {    constructor(props) {        super(props);        this.tableHeader = this.tableHeader.bind(this);    }    tableHeader() {    };}// 写法三export default class App extends React.Component {    tableHeader() {    };}我在看其他人的代码时,发现有上面这几种方法,都有什么区别啊,我纠结了好几天了.上网找了下,也没看出所以然,如果想弄懂,该看哪些资料呢

Answer 1

主要是函数内this指向不同

第一种写法还不是js标准，但是babel已经支持了。相当于让tableHeader的值为一个箭头函数，而箭头函数的特性我们都知道：它内部没有this，它会使用定义时的this，这里this就会指向这个类的实例。

第二种写法它的目的和第一种是一样的，让函数内部的this指向这个类的实例，它是用bind实现的，bind的第一个参数表示context，就是this。

第三种写法就是普通的写法，之所以会有前面两种写法，就是因为第三种写法可能会出问题。

举个简单的例子，按第三种方式写：

class Toggle extends React.Component {

  constructor(props) {

    super(props);

    this.state = {isToggleOn: true};

  }

  handleClick() {

    this.setState(prevState => ({

      isToggleOn: !prevState.isToggleOn

    }));

  }

  render() {

    return (

      <button onClick={this.handleClick}>

        {this.state.isToggleOn ? 'ON' : 'OFF'}

      </button>

    );

  }

}

这段代码实际上是不能工作的，因为handleClick内部用到了this.setState，而handleClick执行时，this是undefined。

如果想要它工作，可以改成前两种的写法，或者这样改：

  render() {

    return (

      <button onClick={ ()=>{ this.handleClick() } }>

        {this.state.isToggleOn ? 'ON' : 'OFF'}

      </button>

    );

  }

用一个箭头函数将其包裹住