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 {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {isToggleOn: true};&nbsp; }&nbsp; handleClick() {&nbsp; &nbsp; this.setState(prevState => ({&nbsp; &nbsp; &nbsp; isToggleOn: !prevState.isToggleOn&nbsp; &nbsp; }));&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <button onClick={this.handleClick}>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.isToggleOn ? 'ON' : 'OFF'}&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; );&nbsp; }}这段代码实际上是不能工作的，因为handleClick内部用到了this.setState，而handleClick执行时，this是undefined。如果想要它工作，可以改成前两种的写法，或者这样改：&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <button onClick={ ()=>{ this.handleClick() } }>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.isToggleOn ? 'ON' : 'OFF'}&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; );&nbsp; }用一个箭头函数将其包裹住