【React】前端元件功能開發,大前端時代敏捷構思術

閱讀時間約 2 分鐘
raw-image

前言

現在的前端需求已經越來越高,要考慮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的品質,但當今的前端工程師想必也時常需要自行設計一些畫面或組件,而前端工程師所能思考的角度是直接貼近實際開發面向的。

raw-image

結語

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

16會員
14內容數
軟體生活 v0.3.6 是一個共享知識、學習成長和認知交流的地方 「在現代科技的浪潮中,理性根植於人文科學的土壤」 生活系列 【一分鐘午後微醺】一杯影視寓意調酒 【三分鐘膠囊咖啡】一顆知識概念膠囊 軟體開發社群 @art.code.design 藝術與人文社群 @art.code.design.ll
留言0
查看全部
發表第一個留言支持創作者!