## React 思維進化 ## 2-4-2-6 ### (JSX/單向資料流/一律重繪) --- ### Jasmine - 非本科系轉職<font color='#96999A' size=6>(財金)</font> - 簡易UIUX專案經驗&後端資料庫開發經驗 - 資策會前端班<font color='#96999A' size=6>(112/12-113/6)</font> - 現從事React前端開發工作<font color='#96999A' size=6>(113/7~now)</font> --- ### 回顧 <font size=7 color='#CE0000'> React 不是直接「轉譯」成 HTML，<br/>而是管理 UI 的狀態工具</font> - <font size=6>JavaScript 直接操作 HTML 是靜態的，<br/>你必須手動修改 DOM。</font> - <font size=6>React 是透過「虛擬 DOM」來高效更新 UI，<br/>只有當狀態變更時，它才會更新對應真實DOM的部分。</font> --- # 2-4 ### JSX根本就不是在JS中寫HTML #### JSX=JavaScript XML --- #### JSX 是 React 的語法擴展，跟HTML沒有關係 #### 只是為了開法者好上手，所以故意長得跟HTML很像 --- ### JSX transformer --- > 轉換區域2-6會深入 >  --- #### Old vs New JSX transformer --- ### Old JSX transformer   --- ### New JSX transformer  --- #### Old vs New JSX transformer  --- ### (補充說明)Compiler vs transpier  --- ### 2-4章節檢測 - <font size=6>JSX 語法的用途是什麼?其背後的本質為何?</font> - <font size=6>JSX 語法為什麼長得很像HTML語法?</font> - <font size=6>什麼是 transpiler?什麼是JSX transformer ?</font> - <font size=6>開發時撰寫的JSX語法是透過哪些流程處理,<br/>最後才能順利的在瀏覽器中執行並定義畫面的?</font> --- # 2-5 ### JSX語法規則&畫面渲染技巧 --- ### 語法規則  --- #### JSX不同的<font color='#CE0000'>資料型別</font>執行對應的處理邏輯，<br/>最後將其轉換為可渲染的 DOM 結構  --- ### 畫面渲染技巧 - 字面值 - 表達式 - 語法中表達另一段JSX語法作為子元素 - 條件式渲染 - 動態式渲染 --- ### JSX字面值   --- ### JSX表達式  --- #### JSX語法中表達另一段JSX語法作為子元素  --- #### 接受簡寫   --- <font size=6> 在 JSX 中，<font color='##CE0000'>最外層只能有一個根節點，</font><br/>這是因為 JSX 會被 React.createElement 轉換，而 React.createElement 只接受單一根元素。<br/>如果要回傳多個元素，可以使用：</font> >- ``` <div></div> ```（增加一層標籤） >- ``` <Fragment></Fragment>```or ```<> </> ```（避免額外的 DOM 標籤） --- - <font size=5 color=' #97CBFF'>由於 JSX 中的每個內容（字面值,表達式...）都是獨立的子元素，<br/>是為了React 在比較新舊 Virtual DOM 時，<br/>能更精細地判斷哪些部分發生變化，<br/>進而最小化 DOM 更新範圍，提高效能。</font> --- ### (補充說明)&& 比較 ? : <font size=6>似乎大部分工程師不喜歡用<font color='#CE0000'>"&&"</font> ,<font color='#CE0000'>"? :"</font>較確保?  ---  ---   --- ### 2-5章節檢測 - <font size=6>JSX 語法與 HTML 語法有哪些不同之處？</font> - <font size=6>為什麼一段 JSX 語法的第一層只能有一個節點？</font> --- # 2-6 ### JSX/單向資料流/一律重繪 --- ### 單向資料流  --- ### 獨立資料與畫面分離  > 會有版本紀錄 --- ### 兩種純JS渲染策略  --- ### React一律重繪，跟純JS有甚麼不同? --- ### 初始React element #### Virtual DOM  --- ### 更新的React element #### Virtual DOM 一律重繪  --- ### 比對兩者差異  --- ### 只針對差異點修改實際DOM element  --- > commit階段useEffect() 或 componentDidUpdate() 之類的生命週期函式才會執行，fiber render& commitphase還會深入 >  --- ### 比較 <font color='#CE0000'>Vue</font> 單向資料流虛擬DOM管理方式 <font size=6>追蹤資料與模板的關係，這樣才能監聽到資料去更新畫面。</font> --- ### 2-6章節檢測 - <font size=6>單向資料流是什麼? - 實現單向資料流的常見渲染策略有哪些?其分別的優缺點是什麼? - React 為了維護單向資料流所採用的渲染策略為何?是怎麼解決該渲染策略的缺點的?</font> --- # 討論 Q&A --- # 感謝聆聽 --- # 3/18 導讀人 筆記工 >資料來源:<<React思維進化>>, chatgpt