React ViewRerender架構
閱讀時間約 1 分鐘
本人工作環境是在公司現有react架構下開發前端頁面，讓使用著可以使用頁面上各種工具與Threejs 3D場景互動。
為了讓組件與功能程式分的更清楚以更好維護，會將程式分成頁面組件與功能程式兩類。（上圖紅色區域為功能程式，綠色區域為頁面組件區域）
組件的setState一般情況又只能傳給自己的子組件，不能傳給外部，但功能程式很常需要更新頁面組件。
例如App組件頁面顯示DetectClickPoint類別物件的滑鼠點擊坐標，但DetectClickPoint改變坐標後，App組件不會主動刷新顯示。
為了讓程式更靈活，於是將重要的react setState曝露出來，讓全局呼叫使用。
例如上面的例子App組件有新增forceRerender方法，可以把forceRerender曝露出來，讓每個地方都能刷新App組件。
再稍微規劃一下，把曝露的react setState都整理到一個ViewRerender.js內，就能方便靈活地在任何地方修改各種組件狀態了。
分享此做法原因在於快速方便且靈活，尚未考慮效能等影響，還請大家多多指點。
4會員
7內容數
留言0
查看全部
你可能也想看
Google News 追蹤
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹，以上內容並非個股分析，還請各位依據自身狀況作出交易決策。歡迎訂閱支持我，獲得相關內容，也祝您的投資之路順遂！
每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ
每月 $99 訂閱方案👉https://re
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
當前大多數網站不再是靜態網站，需要向後端的 Server 請求資料。而且，這些資料的請求通常是非同步進行的。在React中，目前被視為最佳實踐的方式是使用 useEffect。
本文記錄了在實作Movie Guide專案中嘗試使用useEffect Hook從OMDB API抓取電影資料的過程。透過錯誤的抓資料方式和正確使用方式的對比，介紹了useEffect Hook的基本語法、與async...await的搭配、依賴陣列的使用以及cleanup函式的重要性。
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解， 前幾篇也學會了如何建立一個 React 元件，並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念，包含了：React 元件宣告、React Props。
React props 的基本概念與用法，同時也提到了一點 React 在資料傳遞方面的規定與原則。
簡單認識 JS 的 import 和 export 用法，以及它們在 React 的使用情境
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹，以上內容並非個股分析，還請各位依據自身狀況作出交易決策。歡迎訂閱支持我，獲得相關內容，也祝您的投資之路順遂！
每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ
每月 $99 訂閱方案👉https://re
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
當前大多數網站不再是靜態網站，需要向後端的 Server 請求資料。而且，這些資料的請求通常是非同步進行的。在React中，目前被視為最佳實踐的方式是使用 useEffect。
本文記錄了在實作Movie Guide專案中嘗試使用useEffect Hook從OMDB API抓取電影資料的過程。透過錯誤的抓資料方式和正確使用方式的對比，介紹了useEffect Hook的基本語法、與async...await的搭配、依賴陣列的使用以及cleanup函式的重要性。
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解， 前幾篇也學會了如何建立一個 React 元件，並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念，包含了：React 元件宣告、React Props。
React props 的基本概念與用法，同時也提到了一點 React 在資料傳遞方面的規定與原則。
簡單認識 JS 的 import 和 export 用法，以及它們在 React 的使用情境