前言
這系列是 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 合成的，所以不要試圖直接在此對象上取某些屬性做判斷。
可能執行到對應邏輯時，這些屬性值就不對了。
支持的事件
摘自官網，供以後查詢用：
閱讀更多 前端雨爸 的文章
