React ViewRerender架構
本人工作環境是在公司現有react架構下開發前端頁面，讓使用著可以使用頁面上各種工具與Threejs 3D場景互動。
為了讓組件與功能程式分的更清楚以更好維護，會將程式分成頁面組件與功能程式兩類。（上圖紅色區域為功能程式，綠色區域為頁面組件區域）
組件的setState一般情況又只能傳給自己的子組件，不能傳給外部，但功能程式很常需要更新頁面組件。
例如App組件頁面顯示DetectClickPoint類別物件的滑鼠點擊坐標，但DetectClickPoint改變坐標後，App組件不會主動刷新顯示。
為了讓程式更靈活，於是將重要的react setState曝露出來，讓全局呼叫使用。
例如上面的例子App組件有新增forceRerender方法，可以把forceRerender曝露出來，讓每個地方都能刷新App組件。
再稍微規劃一下，把曝露的react setState都整理到一個ViewRerender.js內，就能方便靈活地在任何地方修改各種組件狀態了。
分享此做法原因在於快速方便且靈活，尚未考慮效能等影響，還請大家多多指點。
4會員
9內容數
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
當前大多數網站不再是靜態網站，需要向後端的 Server 請求資料。而且，這些資料的請求通常是非同步進行的。在React中，目前被視為最佳實踐的方式是使用 useEffect。
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解， 前幾篇也學會了如何建立一個 React 元件，並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念，包含了：React 元件宣告、React Props。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
當前大多數網站不再是靜態網站，需要向後端的 Server 請求資料。而且，這些資料的請求通常是非同步進行的。在React中，目前被視為最佳實踐的方式是使用 useEffect。
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解， 前幾篇也學會了如何建立一個 React 元件，並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念，包含了：React 元件宣告、React Props。