react-React深入-一等公民-props-onChange
阿新 • • 發佈：2020-08-12
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 不可避免；而同時存在兩種介面規範，是沒有意義且容易出錯的。
- 第三個原因可能比較「經驗化」。如果現在不能理解和認同，你聽聽就好；反正，當你使用過的優秀開源框架足夠多，你肯定會明白的：當你新接觸一個框架時，暫時拋棄自己以往的習慣，轉而遵守它的語言規範，是最好的選擇。原因很簡單：
- 一個框架從出生到出名，一定有自己與眾不同的框架思想，才能從其他同類型框架中脫引而出。時間的驗證，是有意義的。
- 過於輕率的使用其他的程式設計思想，會多處碰壁；也不利於你真正瞭解此框架的優勢和瓶頸。