前言
這系列是 React 基礎教程(參考 React 官網),記錄了自己入門學習 React 的筆記。不太適合有 React 豐富經驗的同學,但希望看到此文的你,多少都有些收穫。
文章代碼均可在我的碼雲中找到:https://gitee.com/eminoda/react-learn/branches
為了更好的閱讀體驗,可以在底下的“瞭解更多”中查看原文(我的語雀知識庫)。
事件的綁定
業務代碼離不開邏輯的處理,所以第一個就是在 React 中涉及事件的調用。
綁定引用丟失原因
原則上不是 React 造成,這是 js 語言解析的特性。
就好比我們時常會在一個 js 對象方法中,獲取到 this 不是指向本對象,而是頂層作用域 windows 一樣。
目前還未看過 React 源碼,不過大家可以先體會下引用丟失可能的原因:
下面分別示例三種綁定方式。
在構造函數中的綁定
按照 ES6 class 方式,定義一個函數方法 bindInCtor :
JSX 模板中,通過 this.bindInCtor 來調用觸發:
注意,進入方法時,內部的 this 引用 undefined,會出現如下等錯誤情況:
需要通過 bind 來硬綁定:
public class fields 特性綁定
方法調用還是和之前一樣:
不同的是在方法定義的地方使用 ()=>{} 的形式,這方式稱為:
public class fields雖然該特性在 create-react-app 中默認打開,可這是個實驗特性。
在 JSX 模板中通過 callback 綁定
區別上述兩個,此方式只需在 JSX 增加一個回調函數即可。
並且默認參數是 event,最好不要漏掉。
事件傳參
箭頭=>方式
顯式的添加一個回調綁定方法,定義 event 和業務數據。
因為參數是自定義的,所以順序可以按照喜好編排。另外,this 綁定不需要再構造器或者 class fields 特性做額外控制。
bind 綁定方式
使用 bind 來強制綁定 this 引用。
綁定方式同樣不需要做額外處理,因為沒有顯式定義 event ,所以 React 會以第二參數默認傳入:
native 事件
SyntheticEvent 概要
通常我們需要阻止 a 標籤的默認跳轉事件,或者是冒泡事件。
React 幫我們封裝了這些事件,通過 SyntheticEvent 包裝器合成,其實例將被傳遞到事件處理函數。
所以我們能在 event 看到這些事件:
示例,如何阻止 a 標籤跳轉:
不要嘗試控制 SyntheticEvent
因為 SyntheticEvent 是由 React 合成的,所以不要試圖直接在此對象上取某些屬性做判斷。
可能執行到對應邏輯時,這些屬性值就不對了。
支持的事件
摘自官網,供以後查詢用:
閱讀更多 前端雨爸 的文章