前端技術

本文為簡約的軟體開發思維：用 Functional Programming 重構程式 以 Javascript 為例多條這本書中的第14章處理巢狀資料的函數式工具導讀

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

第二次 參加 Web Conf ，這次的議程一樣精彩豐富，甚至有幾個議程同時排在一起讓我一時難以抉擇。兩天的聽完的心得大致上是覺得有些收穫的，對於技術迭代的知識焦慮倒是還好，因為平常就有在看這些東西，所以這次議程有些內容對我來說也算是複習，當然也還是有得到一些新的知識與觀點。

手寫 debounce 防抖函式和 throttle 節流函式 防抖和節流函式是前端常見的效能優化的技巧，透過這兩個函式可以有效的減少函式被觸發的次數，達到效能優化的目的。 debounce 防抖函式 防抖函式的作用是在一段時間內只執行一次函式。當多次觸發事件時，防抖函式會在最後一次事件觸發後的一段時間內執行一次函式。如果在這段時間內再次觸發事件，計時器會重新計時。 應用場景 - 輸入框搜尋建議：當使用者在搜尋框中輸入時，如果每次按鍵都立即發送請求，這將導致過多的請求。在使用防抖函式後，只有使用者停止輸入一段時間後才會發送搜尋請求。 - 按鈕防連點：當使用者連續點擊按鈕時，如果沒有防抖函式，每...

Interface 和 Type 的差別，1.TypeScript 編譯器推論結果不同，宣告 Type 時，所使用的名稱代表的是其背後的型別結構

為什麼實作 CSS 動畫位移效果使用 translate() 比 absolute 絕對定位更好？ 剛好在最近工作上有遇到這個問題，在這裡我們會討論到 translate() 和 absolute 的差異，以及為什麼我們應該使用 translate() 來移動元素。 translate()的優勢 translate() 是 CSS transform 的一個屬性，用來移動元素的位置。它是一個 2D 或 3D 的函數，可以在 x, y, z 軸上移動元素。 當使用 translate() 移動元素的時候，元素仍然保持在原本的位置，只是視覺上移動了，瀏覽器不會重新計算元素的佈局，也就是說，不會觸發...

React 中 useContext 跟 React-MobX 的差異 useContext useContext 是 react 提供的一個 hook，可以讓我們透過讀取和訂閱元件中 context 共享元件之間的資料，主要是用來解決狀態提升和 prop drilling 的問題（即層層傳遞 props）。 在這例子中，使用 useContext 實作了一個簡單的登入表單，當使用者輸入名稱後，點擊登入按鈕，就會顯示歡迎卡片，並且可以登出。 在 App 元件中...

JavaScript 是單執行緒的語言，所以一次只能執行一件事。事件循環 Event loop 是可以確保作為單行緒語言的 Javascript 可以在執行環境(瀏覽器或Node.js)中執行非同步 (asynchronous)程式碼而不會阻塞主執行緒的機制。

JavaScript 中 == 和 === 的差異，== 是鬆散比較運算子、===是嚴格比較運算子，兩者最大的不同：==是當等號兩邊 values 的型別不同時，會強制轉換資料型別與值，而 === 不會。

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

useRef 的使用情境 useRef 是什麼？ useRef 是 React 提供的 hook，用來創建一個 可變（mutable）的引用對象，可以用來存取 DOM 元素或保存跨越多次渲染的資料，且在資料變動時不會觸發 re-render。 useRef 的使用情境 1. 存取 DOM 元素 useRef 最常見的使用情境之一是存取 DOM 元素，讓我們可以直接操作原生 DOM。 在這個例子中，我們使用 useRef hook 來存取 input 元素，並且在 button 的 onClick 事件中，使用 inputRef.current.focus() 來 focus 到 input 元...

Hosting 提升指的是在執行 JavaScript 程式碼之前， JavaScript 引擎會將變數和函式的宣告提升到作用域的頂端。當瀏覽器運行 Javascript 引擎的時候也就是 runtime 時，會進入創造階段

生命週期就是指一個 React Component 在被創建到被銷毀的過程中，會經歷的一系列階段。

為什麼 React 並沒有也不需要子 component 向上溝通父 component 的專門機制？React 的核心概念就是單向資料流，資料只能由上而下傳遞，不需要有子 component 向上溝通父 component 的專門機制的原因在於

React 在 component function 中提供了一個 `useEffect` hook 來 **隔絕和管理副作用** 。React 在每次 render 之後執行 `useEffect`。

React Element React Element 就是組成 React Virtual DOM 畫面結構的元素，它是基於 Virtual DOM 的概念描述並且組成畫面的最小單位，其本質是 JavaScript 物件資料型態，用來描述預期中真實的 DOM 元素。 建立 React Element 的方法 使用 React 的 createElement 方法來建立 React Element 並且傳入以下參數： 1. type:元素的類型，標籤名稱的字串，例如:h1、div、p、span等，也可以傳入 React Element，例如 Fragment 2. props:元素的屬性，必須...

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

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

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

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

react-dom react-dom 是 react 用來將 React Element 繪製成實際 DOM 的工具。透過 react-dom 可以指定目標容器去產生或操作實際的 DOM 元素，在 React 專案中會使用 root 作為目標容器的入口，以此將 React Element 繪製成實際 DOM 輸出至 root 的容器中，而在這個容器中所輸出的 DOM 元素將會交由 React 管轄。 將 React Element 繪製成實際 DOM 的流程 1.準備輸出 DOM 元素的目標容器 這個 就是 React 繪製成實際 DOM 的目標容器。在此容器內的元素將會被 React 管...

JavaScript 的資料型別，包含原始型別 primitive和 物件型別 object

setState 的資料更新後會觸發 component re-render，react 會在將所有執行的事件完成後，才會進行 re-render。

JSX 的標籤需閉合 在 HTML 中，有些標籤是不需要閉合的，例如 、，但在 JSX 中，所有的標籤都需要閉合。 在 JSX 中，沒有子元素的標籤也需要閉合，例如：使用自我閉合，如下： 這樣 JSX transformer 才能夠正確地轉譯。 為什麼 JSX 語法的第一層只能有一個節點？ 因為 JSX 語法就是呼叫一次 React.createElement() 方法，而這個方法只會回傳一個 React Element ，又樹狀的資料結構只能有一個根節點，所以 JSX 語法的第一層只能有一個節點，所以如果有多個節點，就必須用共同一個父節點包起來。 如果不想因為第一層用 包起來而多一個多餘的...

今年的 React Conf 除了眾所矚目的 React 19 ，同時以 meta 開發團隊開發的 React Native 也帶來了不少亮點。有關於 React Native 的討論都集中在[第二天的議程](

React state 的本質？ state 在 React 的畫面管理機制中扮演的角色是什麼？ state 是一種臨時的且可以用來更新記憶應用程式的狀態。在 React 的畫面管理機制中，React 藉由發現 state 的資料更新，去驅動畫面跟著 state 的變動完成相對應的更新。 在 React 單向資料流的機制中，原始資料的 state 是驅動初始畫面渲染完成的成因，可以更新的原始資料 state 就是作為 React 更新畫面的變因，是執行單向資料流的手段，使資料的變動與畫面更新是可靠且更容易預測的。 state 跟 component 的關係是什麼？ component 可以說是...

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

React Native 版本很重要，根據 React Native 的版本號不同，所支援的功能、環境、套件相容性、渲染系統都有所不同，會大大影響後續開發的難易度。所以應去了解手上的版本的內容去設定開發環境的配置。

在 DAY20 解析 React Native 現行架構（Current Architecture）原理(理解了現行架構使用橋接（bridge）溝通的缺點後，接著就要了解現行架構 React Native 開發團隊如何改進？在新的架構中又如何加強與原生模組的通訊？

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

第一次參加了而且完成了 it 鐵人賽的挑戰，雖然這次沒有得獎，但好奇頒獎典禮拿獎的都會是什麼樣的人，還有會有什麼有趣的內容、再加上這次組隊的朋友拿獎了，就決定去頒獎典禮看看。