react中這幾種定義函數(shù)的方式,有什么區(qū)別呢?

// 寫(xiě)法一
export default class App extends React.Component {
    tableHeader = () => {};
}
// 寫(xiě)法二
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.tableHeader = this.tableHeader.bind(this);
    }
    tableHeader() {
    };
}
// 寫(xiě)法三
export default class App extends React.Component {

    tableHeader() {
    };
}

我在看其他人的代碼時(shí),發(fā)現(xiàn)有上面這幾種方法,都有什么區(qū)別啊,我糾結(jié)了好幾天了.上網(wǎng)找了下,也沒(méi)看出所以然,如果想弄懂,該看哪些資料呢

上面的第二種寫(xiě)法我是不能接受,太繁瑣了.
我是否可以理解為,下面兩種下法是等價(jià)的呢.
我一般都是使用下面的第五種寫(xiě)法,但是有同事和我說(shuō)寫(xiě)法四會(huì)比較好,性能方面會(huì)好些,但是我理解的,這兩種寫(xiě)法效果是一樣的,不存在性能不同的問(wèn)題

// 寫(xiě)法四
class  App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick= ()=>{
  }
  render() {
    return (
      <button onClick={this.handleClick}>點(diǎn)擊</button>
    );
  }
}
// 寫(xiě)法五
export default class App extends React.Component {
    handleClick() {
    };
    render(){
        return (
        <button onClick={()=> {this.handleClick();}}>點(diǎn)擊</button>
        );
    }
}

我說(shuō)下我喜歡第五種的原因,因?yàn)橛袝r(shí)候我會(huì)這樣寫(xiě),這樣寫(xiě)法比較簡(jiǎn)單,并且也可以達(dá)到函數(shù)復(fù)用.
抱歉,一個(gè)問(wèn)題修改了這么多次?

export default class App extends React.Component {
    handleClick(type) {
     console.log(`獲取${type}數(shù)據(jù)`);
    };
    render(){
        return (
        <div>
         <button onClick={()=> {this.handleClick('header');}}>獲取頂部數(shù)據(jù)</button>
         <button onClick={()=> {this.handleClick('footer');}}>獲取底部數(shù)據(jù)</button>
        </div>
        );
    }
}

回答

編輯回答

筱饞貓

主要是函數(shù)內(nèi)this指向不同

第一種寫(xiě)法還不是js標(biāo)準(zhǔn)，但是babel已經(jīng)支持了。相當(dāng)于讓tableHeader的值為一個(gè)箭頭函數(shù)，而箭頭函數(shù)的特性我們都知道：它內(nèi)部沒(méi)有this，它會(huì)使用定義時(shí)的this，這里this就會(huì)指向這個(gè)類(lèi)的實(shí)例。

第二種寫(xiě)法它的目的和第一種是一樣的，讓函數(shù)內(nèi)部的this指向這個(gè)類(lèi)的實(shí)例，它是用bind實(shí)現(xiàn)的，bind的第一個(gè)參數(shù)表示context，就是this。

第三種寫(xiě)法就是普通的寫(xiě)法，之所以會(huì)有前面兩種寫(xiě)法，就是因?yàn)榈谌N寫(xiě)法可能會(huì)出問(wèn)題。

舉個(gè)簡(jiǎn)單的例子，按第三種方式寫(xiě)：

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>
    );
  }
}

這段代碼實(shí)際上是不能工作的，因?yàn)閔andleClick內(nèi)部用到了this.setState，而handleClick執(zhí)行時(shí)，this是undefined。

如果想要它工作，可以改成前兩種的寫(xiě)法，或者這樣改：

  render() {
    return (
      <button onClick={ ()=>{ this.handleClick() } }>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }

用一個(gè)箭頭函數(shù)將其包裹住

2018年2月27日 05:59

編輯回答

澐染

寫(xiě)法一與寫(xiě)法三一樣。不同的是寫(xiě)法一的function為ES6中的箭頭函數(shù)，寫(xiě)法三是常見(jiàn)的function.
寫(xiě)法二呢，添加了一個(gè)class的constructor函數(shù)。
js的class默認(rèn)無(wú)this，所以我們通常在constructor中將父類(lèi)的this引入，然后bind到該類(lèi)的方法中。但是，ES6中的() => {} //箭頭函數(shù)，默認(rèn)會(huì)帶this，也不會(huì)有閉包，所以寫(xiě)法一中的tableHeader 是有this的，寫(xiě)法三中的沒(méi)有。

2017年9月21日 01:34

編輯回答

命于你

我也是新手,但是恰好大概知道這幾種用法
第一種寫(xiě)法和第二種寫(xiě)法等同,可以理解為第一種寫(xiě)法是語(yǔ)法糖

第三種的話
你render的時(shí)候用this.tableHeader()無(wú)法調(diào)用,需要先bind(),而第一種寫(xiě)法的話相當(dāng)于已經(jīng)bind過(guò)

2017年12月23日 05:13

編輯回答

愚念

我也補(bǔ)充一下
你需要去看this關(guān)鍵字的相關(guān)內(nèi)容。
你后面問(wèn)道我是否可以理解為,下面兩種下法是等價(jià)的呢.
其實(shí)不是等價(jià)的，因?yàn)榈诙N每次render都是會(huì)重新創(chuàng)建個(gè)function去包裹handleClick，這很浪費(fèi)，也對(duì)性能不利。在JSX中使用.bind(this)也是一樣的，你可以看下jsx-no-bind

2018年7月29日 06:37

編輯回答