React思維進化讀書筆記

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

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 不論呼叫幾次都不應該影響的資料流或是程式邏輯。