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 不可避免；而同時存在兩種介面規范，是沒有意義且容易出錯的，
- 第三個原因可能比較「經驗化」，如果現在不能理解和認同，你聽聽就好；反正，當你使用過的優秀開源框架足夠多，你肯定會明白的：當你新接觸一個框架時，暫時拋棄自己以往的習慣，轉而遵守它的語言規范，是最好的選擇，原因很簡單：
- 一個框架從出生到出名，一定有自己與眾不同的框架思想，才能從其他同型別框架中脫引而出，時間的驗證，是有意義的，
- 過于輕率的使用其他的編程思想，會多處碰壁；也不利于你真正了解此框架的優勢和瓶頸，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/14455.html
標籤：其他
上一篇：CSS中使用文本陰影與元素陰影