title: '[react]深入 - 一等公民 props & onChange'date: 2017-08-23 10:05:07tags:reactreactjspropsonChange框架reduxcategories:技術寫在前面這篇博客的前身是 《React 新手必須知道的10件事》，... ...
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 組件的一致性。原因有：
- React 的可視組件的層級結一般是在 jsx 文件中以一種類似於 html 的語言來表示的，這種表示方式既方便又直觀，表達力很強。在這種特殊的 jsx 語言里，「props & onChange介面規範」很容易且自然的被遵守。而如果用 「ref & method介面規範」，你不得不跳轉到很多行以外，才能明白信息的傳遞過程，既不利於代碼編寫，也不利於閱讀。
- 我們避免不了用 props 方式來進行數據傳遞。我們說「避免不了」，因為很多原因，在此僅列舉兩個：一、jsx 文件中，Html 內置元素只能通過 props 來傳遞參數；二、很多第三方庫（如果我們在開發一個大型項目，必定有很多「輪子」不用自己造），也必須通過 props 來傳遞參數。所以，props 不可避免；而同時存在兩種介面規範，是沒有意義且容易出錯的。
- 第三個原因可能比較「經驗化」。如果現在不能理解和認同，你聽聽就好；反正，當你使用過的優秀開源框架足夠多，你肯定會明白的：當你新接觸一個框架時，暫時拋棄自己以往的習慣，轉而遵守它的語言規範，是最好的選擇。原因很簡單：
- 一個框架從出生到出名，一定有自己與眾不同的框架思想，才能從其他同類型框架中脫引而出。時間的驗證，是有意義的。
- 過於輕率的使用其他的編程思想，會多處碰壁；也不利於你真正瞭解此框架的優勢和瓶頸。
