React大前端時代元件構思方法

前言

現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者都更清楚使用元件提供的功能，或是在開發元件時可以更加迅速的構思流程。

已有第三方套件，還需要學習開發前端元件嗎?

第三方套件已經將UIUX及前端常用功能模組化，但是當專案需求已超出第三方套件提供的基本功能時，就需要重新再元件上添加功能，而在修改上依然要回到底層架構，如修改外觀則需要回到CSS底層，如邏輯面就得將第三方程式碼進行客製化，而網頁前端架構已經從傳統的靜態呈現資訊，直到現在的React、Flutter都需要考慮許多的邏輯面向，要如何開發一個好用的元件，讓後續維護優化成本降低，都是一個重要的考量面向。

概念方向

再來我會以React以及Flutter的概念層面來設計

📖 參數: 組件外部傳入

📖 變數: 組件內部渲染

UI渲染層面

1. 拆解元件存在變數
2. 構思元件外部傳入參數

功能

1. 渲染組件需改變的狀態(外觀、文字)
2. 進場過渡動畫(元件是否需要在視覺上優化)
3. 組件外部帶入事件(Function)

好的元件具備條件

• 重複使用性
• 明確目的的參數帶入
• 透過參數實現多種需求功能調整

React Native前端開發構思

React Components

以目前網頁架構提倡的“將每一個區塊視為Components”，將網頁介面的各項功能拆解開來，將資料與UI分離，因此在設計組件上要盡可能的讓他可以重複被利用。

React Props

利用React Props來切換組件(Components)的狀態，可以考慮幾個類型面向。

• 切換UI外觀/狀態
• 從上層(父類別)帶入的函式
• 從上層(父類別)帶入的資料

設計規劃

在進行前端開發時，可以依照自己的構思畫張設計藍圖，雖然不需要像UI/UX設計師一樣畫出Wireframe的品質，但當今的前端工程師想必也時常需要自行設計一些畫面或組件，而前端工程師所能思考的角度是直接貼近實際開發面向的。

結語

以上是一些在開發React組件的心得，在開發前我會先構思一下組件的設計，在開發Components前規畫一個簡易的設計圖，按照自己在開發時的功能面或是UI美觀層面來繪製草稿，也希望藉由這個分享給大家參考component的構思過程。