meta魔豹聯盟2.0佛薩奇開發（Demo）案例

ES7 新增類功能 2：箭頭函式的類方法自動繫結 this
ES 6 中類方法需要繫結 this，即需要到 constructor() 中去呼叫 .bind(this) 才能用 this. 來呼叫，或者在呼叫處去繫結。

比如：實現一個點選標題，改變標題文字內容的功能的方法。ES 6 需要在 constructor 中繫結 this:

class App extends Component {
constructor() {

super()this.changeTitle = this.changeTitle.bind(this);

}
state = {

title: 'Hello from outside'

};
changeTitle() {

this.setState({ title: 'changed' })

}
render() {

return (  <div>
    <h1 onClick={this.changeTitle}>Title - {this.state.title}</h1>
  </div>
);

}
}
或者呼叫處去繫結 this：

class App extends Component {
state = {

title: 'Hello from outside'

};
changeTitle() {

this.setState({ title: 'changed' })

}
render() {

return (
  <div>
    <h1 onClick={this.changeTitle.bind(this)}>Title - {this.state.title}</h1>
  </div>
);

}
}
ES 7 的方法

箭頭函式賦值到變數上，就可以不用繫結 this。幫上面程式碼更改以後就是：

class App extends Component {
state = {

title: 'Hello from outside'

};
changeTitle = () => {

this.setState({ title: 'changed' })

}
render() {

return (  <div>
    <h1 onClick={this.changeTitle}>Title - {this.state.title}</h1>
  </div>
);

}
}