React 組件開發實踐

原文： React 組件開發實踐 | AlloyTeam
做者： chuangchuang

基於 React 的組件化開發方式，爲富前端 web 應用提供大量技術實踐，社區逐漸造成了穩定的組件規範，本文從 API 層面概括出 6 種組件類型，分析其優缺點和適用場景，爲平常組件開發提供一個方法指南。6 種類型分別爲結構型組件、樣式型組件、組合型組件、配置型組件、受控型組件、非受控組件。

結構型組件與樣式型組件

結構型組件定義了組件大致結構，結構的具體實現由外部傳遞。樣式型組件肯定了組件結構細節，外部只需傳遞參數便可渲染預期樣式。樣式型組件是較爲經常使用的組件類型，不多有開發者會根據一份設計稿來推斷組件將來可能的改動，這也致使了樣式型組件在複用性與拓展性上偏弱。對於比較通用的組件，例如 Button 按鈕、Modal 彈框、Form 表單等，不該僅提供樣式型實現，應該抽象出結構型組件。

這兩種類型並非非此即彼的關係，樣式型組件固定的 API 參數能夠下降使用成本，結構型組件彈性的 API 設定能夠提供擴展性，結合二者的優勢能夠構造出既簡單又可拓展的組件。關於二者結合的優點最具說服力的實踐是通用組件庫，結構型組件可顯著下降業務方的溝通成本與接入風險，以下示意圖演示了業務方與組件庫之間的兩種溝通模型：

樣式型組件庫與業務方的溝通模型

結構型組件庫與業務方的溝通模型

以上兩種模型每個箭頭爲一個工時，樣式型組件庫完成一次需求變動須要三個工時，業務方要等待組件庫實現功能後才能進行下一步。結構型組件庫給予業務方更多的自主性，不用等待組件庫實現新特性，經過自定義結構知足當前需求，組件庫有充足的時間分析需求是否通用，是否值得提供新 API，結構型組件在這個過程當中扮演了緩衝區的角色，使得業務方與組件庫能夠並行協同開發，確保各自的研發效率與節奏。

組合型組件與配置型組件

組合型組件以 JSX 爲主體，經過組件間的嵌套組合描述業務邏輯。配置型組件經過 props 傳遞數據結構，組件內部根據預先設定好的邏輯渲染視圖。平常開發傾向於寫配置型組件，組合型組件更多的出如今通用組件庫中。

組合型組件結構清晰，擴展性高，組件使用者經過閱讀 JSX 的 render 函數便可瞭解業務邏輯，但組件間聯繫微弱，ref 引用相互隔離，難以構建複雜的交互組件。配置型組件須要寫的代碼量少，但組件內部渲染處於黑箱，使用者難以理解組件邏輯，使其在拓展性上偏弱。比較基礎的組件，例如 Form 表單，Select 選框等，建議採用組合型，有利於使用者組織業務代碼，複雜交互組件可以使用配置型。

組合型組件最具表明性的實踐是 Ant Design，整個組件庫的 API 設計嚴格遵循組合型優先原則，爲同一組件的不一樣位面分別提供組合型結構，使其在拓展性和易用性上都達到了很高的水準。以下示意圖演示了用兩種組件類型開發 Select 選框的演化模型。

Select 簡單選框，組合型與配置型，都能提供清晰易用的接口

比較複雜的 Select 選框組，組合型組件經過提供新的子組件，仍可保持簡潔的 API 調用。配置型組件有兩種實現方式：提供新的屬性或者擴展原屬性，兩種方式都會產生必定認知成本。

對於須要自定義的 Select 選框組，組合型組件得益於 JSX 的嵌套結構，能夠很從容的提供自定義 API。配置型組件實現一樣的功能，須要再一次拓展屬性配置。

受控型組件與非受控組件

這兩種類型有另外一種表述：無狀態組件和有狀態組件。受控型組件內部只負責展現，僅對外提供回調，以表達改變的指望，其最終行爲徹底由外部驅動。非受控組件由內部處理某些行爲，並不強制外部狀態同步。官方推薦輸出無狀態受控組件，可是有狀態的組件在項目開發中還是必要的。

受控型組件在自身層面規範了單向數據流，能夠與其餘數據層框架整合，可是開發一個複雜的受控型組件，開發者可能須要向外提供數不清的接口與回調。非受控組件較爲智能，組件能夠自主維護狀態，但開發者經常所以懶於作狀態同步，上層組件從新渲染時，非受控組件會丟失內部的狀態，失憶，平常開發中大多數的 bug 所以而來。

咱們常常會之內部是否擁有 state 來衡量一個受控型組件與非受控組件，可是徹底遵照這條標準將很難提供一個簡單易用的大型受控組件，全部狀態都由外部控制，使用者須要寫大量配置代碼才能跑通一個大型組件，使用成本極高。官方提供的解決方案經過二者結合的方式來處理受控與易用的矛盾，以下示意圖展現了一個 Input 組件能夠接受的參數類型。

按照類型定義可推導出以下三種使用方式，分別對應一種受控型用法，和兩種非受控用法。

開發一個受控與非受控兼具的組件，對組件自己的開發與維護有更高的要求，其難度隨組件自己複雜度的增長而增長。可是對組件使用者來講，這種二者兼具的組件最能適應快速開發與後期代碼調優。任何有輸入輸出特性的組件（各類表單，配置 + 回調組件），均可參照上述類型定義提供 API。

總結

React 組件本質上是 JS 函數的另外一種形態，一切與函數有關的思想均可以反映在組件裏，每一種組件都有其適用場景，開發一個大型 Web 項目須要搭配使用不一樣類型的組件，如何作出合適搭配則須要長時間的開發積累，在真正的項目裏尋找最優解。

---

AlloyTeam 歡迎優秀的小夥伴加入。
簡歷投遞: alloyteam@qq.com
詳情可點擊 騰訊AlloyTeam招募Web前端工程師(社招)