React ViewRerender架構

閱讀時間約 1 分鐘

本人工作環境是在公司現有react架構下開發前端頁面,讓使用著可以使用頁面上各種工具與Threejs 3D場景互動。

為了讓組件與功能程式分的更清楚以更好維護,會將程式分成頁面組件與功能程式兩類。(上圖紅色區域為功能程式,綠色區域為頁面組件區域)

raw-image


組件的setState一般情況又只能傳給自己的子組件,不能傳給外部,但功能程式很常需要更新頁面組件。

例如App組件頁面顯示DetectClickPoint類別物件的滑鼠點擊坐標,但DetectClickPoint改變坐標後,App組件不會主動刷新顯示。

raw-image


為了讓程式更靈活,於是將重要的react setState曝露出來,讓全局呼叫使用。

例如上面的例子App組件有新增forceRerender方法,可以把forceRerender曝露出來,讓每個地方都能刷新App組件。

再稍微規劃一下,把曝露的react setState都整理到一個ViewRerender.js內,就能方便靈活地在任何地方修改各種組件狀態了。

raw-image


分享此做法原因在於快速方便且靈活,尚未考慮效能等影響,還請大家多多指點。

demo範例:ViewRerender架構Demo - StackBlitz

    4會員
    7內容數
    留言0
    查看全部
    發表第一個留言支持創作者!
    s_SoNg的沙龍 的其他內容
    網格擴散可以就像剪紙一樣,把紙上想要的部分剪下來。 通過模型的一個點,找到周圍相鄰的點;其他點又能找到周圍相鄰的點,就像水波一樣擴散出去。 許多3D的算法,如裁切、干涉深度偵測等都會用到。
    在THREE r125版本開始,THREE.Geometry就被棄用。 自己的職位是IT前端,由於套件安全性的原因,需要對THREE套件進行升級,但自己所在公司的程式內還有大量的Geometry。 因為前輩們開發了一些複雜強大的算法,如果用Threejs官方建議的正規方法,自己必須要看懂並且改寫算法
    網格擴散可以就像剪紙一樣,把紙上想要的部分剪下來。 通過模型的一個點,找到周圍相鄰的點;其他點又能找到周圍相鄰的點,就像水波一樣擴散出去。 許多3D的算法,如裁切、干涉深度偵測等都會用到。
    在THREE r125版本開始,THREE.Geometry就被棄用。 自己的職位是IT前端,由於套件安全性的原因,需要對THREE套件進行升級,但自己所在公司的程式內還有大量的Geometry。 因為前輩們開發了一些複雜強大的算法,如果用Threejs官方建議的正規方法,自己必須要看懂並且改寫算法
    你可能也想看
    Google News 追蹤
    Thumbnail
    本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
    Thumbnail
    使用React.js實作CAPTCHA元件的步驟和技巧
    Thumbnail
    使用 React 做出一個便條紙的頁面,可以紀錄自己的想法後丟上去。並且讓使用者即使重新整理頁面,也不會遺失資料。
    Thumbnail
    前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
    Thumbnail
    前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
    當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
    Thumbnail
    本文記錄了在實作Movie Guide專案中嘗試使用useEffect Hook從OMDB API抓取電影資料的過程。透過錯誤的抓資料方式和正確使用方式的對比,介紹了useEffect Hook的基本語法、與async...await的搭配、依賴陣列的使用以及cleanup函式的重要性。
    Thumbnail
    React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
    Thumbnail
    React props 的基本概念與用法,同時也提到了一點 React 在資料傳遞方面的規定與原則。
    Thumbnail
    初探 JSX 語法、規則以及其背後運作方式。
    Thumbnail
    簡單認識 JS 的 import 和 export 用法,以及它們在 React 的使用情境
    Thumbnail
    本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
    Thumbnail
    使用React.js實作CAPTCHA元件的步驟和技巧
    Thumbnail
    使用 React 做出一個便條紙的頁面,可以紀錄自己的想法後丟上去。並且讓使用者即使重新整理頁面,也不會遺失資料。
    Thumbnail
    前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
    Thumbnail
    前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
    當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
    Thumbnail
    本文記錄了在實作Movie Guide專案中嘗試使用useEffect Hook從OMDB API抓取電影資料的過程。透過錯誤的抓資料方式和正確使用方式的對比,介紹了useEffect Hook的基本語法、與async...await的搭配、依賴陣列的使用以及cleanup函式的重要性。
    Thumbnail
    React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
    Thumbnail
    React props 的基本概念與用法,同時也提到了一點 React 在資料傳遞方面的規定與原則。
    Thumbnail
    初探 JSX 語法、規則以及其背後運作方式。
    Thumbnail
    簡單認識 JS 的 import 和 export 用法,以及它們在 React 的使用情境