React思維進化讀書筆記

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

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