react-React深刻-一等公民-props-onChange

---

title: '[react]深刻 - 一等公民 props & onChange'
date: 2017-08-23 10:05:07
tags:

• react
• reactjs
• props
• onChange
• 框架
• redux
  categories:
• 技術

---

寫在前面

這篇博客的前身是 《React 新手必須知道的10件事》，結果寫着寫着，「每件事」都遠遠超過了預計的300～500字的限制。給讀者的閱讀形成了極大的困擾。故將《10件事》拆開成若干篇，每一篇只講一個主題。

正文

React 最推薦的數據交互方式是：props & onChnage。在這種交互方式裏：對於一個可視組件 ComponentA，用 props 來向它發送信息，而用 onChange 回調函數來接收 ComponentA 發送的·信息。在程序世界裏，咱們更喜歡把上述「交互方式」稱爲「接口」，雖然這個「接口」不是咱們在面嚮對象語言裏的 interface，可是跟 interface 有着相似的功能。 咱們暫且把這個「接口規範」取名爲 「props & onChange 接口規範」。

React 仍是給了另一種方法來進行數據交互：ref & method。在這種交互方式裏，咱們經過 <ComponentA ref={ r => this.refOfComponentA = r } 的方式來得到 ComponentA 對象的引用，而後用 this.refOfComponentA.someMethod() 來向它發送信息。咱們把這交互方式稱爲 「ref & method 接口規範」。在典型的客戶端開發環境裏（iOS、Android、Windows PC等），這種方式更爲常見，而且對函數調用更加友好，更「像」程序語言。可是，對於 React 新手，咱們強烈不建議使用這種藉口規範，除非你對 React 整個機制很是瞭解，仍然想用它。由於它嚴重破壞了 React 組件的一致性。緣由有：

1. React 的可視組件的層級結通常是在 jsx 文件中以一種相似於 html 的語言來表示的，這種表示方式既方便又直觀，表達力很強。在這種特殊的 jsx 語言裏，「props & onChange接口規範」很容易且天然的被遵照。而若是用 「ref & method接口規範」，你不得不跳轉到不少行之外，才能明白信息的傳遞過程，既不利於代碼編寫，也不利於閱讀。
2. 咱們避免不了用 props 方式來進行數據傳遞。咱們說「避免不了」，由於不少緣由，在此僅列舉兩個：1、jsx 文件中，Html 內置元素只能經過 props 來傳遞參數；2、不少第三方庫（若是咱們在開發一個大型項目，一定有不少「輪子」不用本身造），也必須經過 props 來傳遞參數。因此，props 不可避免；而同時存在兩種接口規範，是沒有意義且容易出錯的。
3. 第三個緣由可能比較「經驗化」。若是如今不能理解和認同，你聽聽就好；反正，當你使用過的優秀開源框架足夠多，你確定會明白的：當你新接觸一個框架時，暫時拋棄本身以往的習慣，轉而遵照它的語言規範，是最好的選擇。緣由很簡單：
   1. 一個框架從出生到出名，必定有本身不同凡響的框架思想，才能從其餘同類型框架中脫引而出。時間的驗證，是有意義的。
   2. 過於輕率的使用其餘的編程思想，會多處碰壁；也不利於你真正瞭解此框架的優點和瓶頸。