好程式設計師分享React-010-事件處理函式的this指向問題

好程式設計師分享 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 =  () =>  {

   ...

}

  

// 這種方式同樣也推薦。