前端技術

本文為簡約的軟體開發思維：用 Functional Programming 重構程式 以 Javascript 為例這本書中的共享資源、協調時間線這兩個章節的筆記

《簡約軟體開發思維用 Functional Programming 重構程式以 JavaScript 為例》 讀書會導讀處理巢狀資料的函數式工具章節

第二次 參加 Web Conf ，這次的議程一樣精彩豐富，甚至有幾個議程同時排在一起讓我一時難以抉擇。兩天的聽完的心得大致上是覺得有些收穫的，對於技術迭代的知識焦慮倒是還好，因為平常就有在看這些東西，所以這次議程有些內容對我來說也算是複習，當然也還是有得到一些新的知識與觀點。 回顧 以下就我有聽的議程且較有印象的內容做一個回顧： !2024 WebConf 1. 有限狀態機與 RxJS - 奶綠茶 有限狀態機與 RxJS 這兩個題目剛好我都不熟。

useRef 是 React 提供的 hook，用來創建一個 可變（mutable）的引用對象，可以用來存取 DOM 元素或保存跨越多次渲染的資料，且在資料變動時不會觸發 re-render。

Interface 和 Type 的差別 1.TypeScript 編譯器推論結果不同 Type 宣告 Type 時，所使用的名稱代表的是其背後的型別結構 Interface Interface 介面宣告時會使用名稱代表 TypeScript 編譯器推論的結果 2.Type 和 Interface 的擴展性差異 Type Type 較適合靜態、變動性較小的資料結構，並且可以表達任一型別。 雖然 Type 無法擴充，但可以使用交集運算子 & 來合併多個 Type。

JavaScript 中的事件循環 event loop 是什麼? JavaScript 是單執行緒的語言，所以一次只能執行一件事。事件循環 Event loop 是可以確保作為單行緒語言的 Javascript 可以在執行環境(瀏覽器或Node.js)中執行非同步 (asynchronous)程式碼而不會阻塞主執行緒的機制。 事件循環 event loop 進行的流程 1. Javascript 的主執行緒開始執行 scripts，並且將同步任務放入執行棧 （call stack），直到該任務完成後才會被移除。

為什麼實作 CSS 動畫位移效果使用 translate() 比 absolute 絕對定位更好？ 剛好在最近工作上有遇到這個問題，在這裡我們會討論到 translate() 和 absolute 的差異，以及為什麼我們應該使用 translate() 來移動元素。 translate()的優勢 translate() 是 CSS transform 的一個屬性，用來移動元素的位置。它是一個 2D 或 3D 的函數，可以在 x, y, z 軸上移動元素。

Hosting 提升 Hosting 提升指的是在執行 JavaScript 程式碼之前， JavaScript 引擎會將變數和函式的宣告提升到作用域的頂端。 當瀏覽器運行 Javascript 引擎的時候也就是 runtime 時，會進入創造階段： 創造階段 首先進入創造階段，JavaScript 引擎會會將幫所有的變數和函式準備記憶體的空間，此時的變數與函式會提升。 var 變數的提升 var 變數的宣告會被提升到作用域的的頂端，但賦值（值的初始化）不會被提升。因此，在提升後變數會被初始化為 undefined。

單向資料流指的是一種畫面與資料流管理的設計模式，原始資料變動會驅動畫面的更新，透過原始資料與模板綁定後渲染產生畫面，當資料變動時，畫面才會去更新。在資料傳遞的過程中，是單向的而且不可以被修改的，這樣可以確保畫面不會因為資料在更新以外的地方被修改而導致畫面的不一致，畫面也不會去修改原始資料。

React 在 component function 中提供了一個 useEffect hook 來 隔絕和管理副作用 。React 在每次 render 之後執行 useEffect。 副作用 side effect 副作用指的是當函式被呼叫時，除了回傳值以外，還會對外部環境產生影響的操作。常見的副作用包括： - 呼叫 API - 操作 DOM（例如手動新增事件監聽器） - 設定計時器（例如 setTimeout、setInterval） - 訂閱事件（例如 WebSocket 或其他事件系統） - 修改全域變數 使用 useEffect hook 處理副作用的原因 若直接在...

component 簡單來說就是畫面的藍圖，component 就是由開發者自行定義好的商業邏輯、特定的樣式、React Element 畫面所組成的，就如同蓋房子一樣，如果說應用程式是一棟房子，那麼 component 就是搭建成房子的不同建材：鋼筋、水泥、磚頭...，透過組合這些 component 而逐步組成應用程式的畫面，同時 component 是可以重複使用的，讓程式碼變得更容易維護與管理。

DOM DOM (Document Object Model) 是一個網頁樹狀資料結構的物件，用來呈現瀏覽器中的畫面結構。當頁面產生變化時，便是透過操作 DOM 後藉由瀏覽器的渲染引擎重繪來呈現畫面，一旦對 DOM 進行操作，渲染引擎就會自動地將整個畫面重繪。 操作 DOM 對效能的影響 操作 DOM 本身是一個昂貴的效能負擔，如果在短時間內頻繁或大量的更新 DOM 元素，可能會造成畫面卡頓，因為瀏覽器的渲染引擎也會跟著不斷重繪畫面。因此，在前端的針對 DOM 的效能優化就是盡量縮小操作 DOM 的範圍。

state 是一種臨時的且可以用來更新記憶應用程式的狀態。在 React 的畫面管理機制中，React 藉由發現 state 的資料更新，去驅動畫面跟著 state 的變動完成相對應的更新。

JSX 語法 JSX 語法是一種語法糖，提供我們在建立 react element 時，用類似撰寫 HTML 語法的體驗，提高可閱讀性與開發體驗。 1. 使用 React.createElement 建立 React Element ２. 使用 JSX 語法建立 React Element JSX 語法透過開發工具轉譯後以上兩者的 react element 結構是一樣的，但是使用 JSX 語法的方式更為簡潔。 JSX 語法本質就是 去呼叫 React.createElement 來建立 React Element 的替代語法，其所回傳的值便是一個 React Element。

在 component 畫面管理機制中， component 的渲染機制可以分成兩個階段，分別是 render phase 和 commit phase。 Render phase 在 Render 階段，component 會進行渲染，並且產生 react element。 Commit phase 在 Commit 階段，component 會把產生的 react element 畫面結構提交並處理到實際的瀏覽器 DOM 上面。

Component 的三大生命週期 生命週期就是指一個 React Component 在被創建到被銷毀的過程中，會經歷的一系列階段。 一. Mount Mount 流程會在 component 以 React component 的形式第一次出現在畫面上時觸發。 render phase: 1. React 會執行 component function 以傳入的 props 和 state 產生初始畫面區塊的 react element。

useEffect hook 最主要的作用在於處理與畫面無關的 side effect，並非是 functional component 的生命週期API，因為這個處理副作用的 hook 不論呼叫幾次都不應該影響的資料流或是程式邏輯。

解析 React Native 新架構（New Architecture） 原理 在 DAY20 解析 React Native 現行架構（Current Architecture）原理 理解了現行架構使用橋接（bridge）溝通的缺點後，接著就要了解現行架構 React Native 開發團隊如何改進？在新的架構中又如何加強與原生模組的通訊？ 同樣的，幾個新架構的重要關鍵字必須先瞭解一下： Keywords codeGen 一個靜態類型的檢查器，會在應用程式建構 (App build time) 的時候，將靜態類型的 Javascript 程式碼（Typescript、Flow）翻譯成...

React Native 各個版本更新摘要（更新至 0.74） 留意專案目前使用的 React Native 版本 React Native 版本很重要，根據 React Native 的版本號不同，所支援的功能、環境、套件相容性、渲染系統都有所不同，會大大影響後續開發的難易度。所以應去了解手上的版本的內容去設定開發環境的配置。 我整理了以下各版本的更新摘要： 由新版本至舊版本各個版本的更新摘要（0.74 ~ 0.60） React Native 0.74（2024年4月） - 推出 Yoga 3.0： 全新的 layout 引擎 - 支援 align-content:...

解析 React Native 舊架構（Current Architecture）原理 長久以來，React Native 的效能問題一直為人詬病，為了解決這個問題，React Native 開發團隊針對舊有的架構進行了重構，並在 0.68 版本推出了新架構（New Architecture）。接下來，我會分享原來的架構是 Javascript 如何與 natvie 溝通，究竟面臨了什麼問題？讓 React Native 開發團隊決定重構。

一直以來沒有參加過這種大型付費的 conference，又聽說這是睽違十年後再次舉辦 的 webConf ，所以就算現在幾乎都在開發 APP 還是想來看看，畢竟 Web 領域是我剛轉職時主要學的。況且學習前端技術的過程中，讀過不少這次議程講者的書籍或文章，甚至是課程，參加這個活動某種程度上是偶像見面會的概念（？另外，就是想透過這次的 conf 知道現在外面主流開發的方式與技術是什麼？