好程序員分享React-010-事件處理函數的this指向問題，區分普通函數與事件處理函數
1、普通函數是直接調用的。不存在 this 指向問題，誰調用的，this 指向就是誰。
2、普通函數沒有事件對象 event
3、事件處理函數其實也是一個函數，只是他綁定在某個事件上。
4、事件處理函數的 this 默認指向 undefined
解決this指向問題的4種辦法
1、直接在事件綁定的地方加上 .bind(this)
<button onClick={this.handleClick.bind(this)}>點我</button>
2、使用箭頭函數
<button
onClick={event => {
this.handleClick(event);
}}
>
點我
</button>
3、在構造函數中統一進行this指向的綁定
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
render() {
return (
<button onClick={this.handleClick}>點我</button>
)
}
4、使用實驗性質的 public class fileds 語法。要去使用的話，的需要babel插件的支持.
1、安裝 @babel/plugin-proposal-class-properties babel 插件
2、去 babel 的配置文件中，配置好
3、從新啓動項目
class App extends React.Component {
handleClick = () => {
console.log(this);
};
}
爲啥要使用 bind 來修改this指向，而不能使用 apply、call?
因爲 apply 與 call 他們會直接執行函數，而 bind 會返回一個新的函數。
在調用子組件的時候，需要傳遞一個方法下去，這時這個方法的this綁定推薦使用哪幾種：
推薦使用：在構造函數中的bind 與 public class fileds 語法。
1、首先要知道的是，父組件render，子組件一定會render
2、我們希望如果子組件沒有發生變化，那麼在 父組件render的時候，讓子組件不做render。節省性能。
3、要實現第2點，可以讓子組件繼承的是 PureComponent
4、PureComponent 。它會幫助我們計算子組件接收到的porps 有沒有發生變化，如果有那麼就 render .如果沒有就阻止render
<Child onFn1={this.handleFn1.bind(this)} />
// 由於 .bind() 方法每次都會返回一個新的函數，所以這種方式不推薦。。。。
<Child onFn1={() => { this.handleFn1() }} />
// 由於 每次執行到這行代碼，箭頭返回都是一個新的箭頭函數，所以這種方式不推薦
constructor() {
super();
this.handleFn1 = this.handleFn1.bind(this)
}
<Child onFn1={this.handleFn1} />
// 由於 constructor 構造函數只會執行一次，後續執行到 Child 的代碼，傳遞過去的 onFn1 沒有發生變化
// 所以這種方式推薦
<Child onFn1={this.handleFn1} />
handleFn1 = () => {
...
}
// 這種方式同樣也推薦。