# 《React 思維進化》 2-1 ~ 2-3
## 簡報連結
- https://hackmd.io/cWREnw9gSdKylPV2C022VA
## Summary
### Ch1
- JS 基礎型別
- string(常用)
- number(常用)
- bigint
- boolean(常用)
- undefined(常用)
- symbol
- null(常用)
- React 開發環境
- Create React App
- Next.js
- Remix
- Astro: 本身支援多語言，也可用 React 寫
### Ch2
#### 2-1 DOM 與 Virtual DOM
- DOM 本身不是 JS 語言的一部分，是瀏覽器提供的方法
## QA
#### 什麼是 Virtual DOM?
- 定義一個畫面期待的結構，是一個夢(但還沒成真)
#### 討論與澄清對 Virtual DOM 的理解
- Virtual DOM 是開發者和瀏覽器之間的抽象層；所有定義和畫面操作都從Virtual DOM處理，每次都會有之前版本的也會有當下的，前後比對後產生差異處，React 才根據實際差異處做操作；此方法可將 DOM 操作做到最小化，每次只做最小 DOM 操作，以達到效能優化
- Virtual DOM只是一個概念，React 實作此概念的方式就是 React element
- 實際在寫 React 就是在~~操作~~ 定義(或捨棄)React element，React渲染React element產生實際畫面
- 開發者對 React element 只有兩種動作: 定義和捨棄，不會操作，操作聽起來像修改，React element不會被修改
#### 為何 React element 被建立後就不可被事後修改?
- 額外提問: React 設計哲學是 immutable，這和不能被修改的原因有關嗎?
- -> 不是直接相關，但多少有間接相關，immutable 通常是指狀態相關的事情，因為 JS 只有非基礎型別(物件、陣列)才會有 immutable，React 在講 immutable 通常是指物件
- 不能被更新的本質其實是同一件事情，他們(state, state建立的畫面)都是快照畫面，這些 state 會建立該狀態對應的 React element，這些建立的都是快照(歷史紀錄)，都是已存在的事實，歷史紀錄就不該被修改
- 新的 render 要產生新的畫面、新的狀態，而不是改變既有的狀態與畫面
- 可以想像每 render 就像一次 git commit(但commit可以被修改，React element不能)，或是像送出購物車後，當下的購物商品快照(紀錄購物當下的贈品、當下的價格)
- 每 render 一次就是在建造一次新的版本的歷史紀錄
- 一旦被建立後，就是某時間點的快照，建立後資料就不會被改變了(如: useState)
#### 如果真的改 React element 會發生什麼事?
- 書中的概念性解釋: 會影響新舊 React element 的比較 (但其實不完全正確，下點說明)
- 內部實作描述: 實際 React 內部還有一個抽象層，React 會將 React element 轉為fiber node 再做比較，實際上舊的 react element 會被存放起來，不會直接拿來跟新的比較
- 好文章推推: [Ref. React 開發者一定要知道的底層架構— React Fiber](https://medium.com/starbugs/react-開發者一定要知道的底層架構-react-fiber-c3ccd3b047a1)
- fiber 比較底層，但放不下了QQ
#### immutable state 是 React 也阻擋不了的
- 舊資料被修改其實不會有太大影響，但有時遇到非同步事件就會有問題
- 如: 如果有 setTimeout 要三秒後執行事件，三秒後執行的事件最後會顯示新資料，因為你中間去改了那個舊資料
- 修改過去舊資料的問題請見之後章節
#### 為何操作DOM是效能成本昂貴的東西?
- 有些沒必要的操作，卻去操作那些DOM，就造成效能浪費
- 有些DOM就沒有要改，就不需要去操作他
#### React DOM 是什麼? root 是什麼?
- React DOM 將 React element 轉換後產生 DOM
- root 建立畫面管理的入口，因為 body 可能會有很多第三方套件的加入，所以在處理和控管上 React 無法全權管理
- 通常只會建立一個 root，但如果要和其他框架整合，也可以用多個 root
#### reconciler 與 renderer 分別在做什麼?
- reconciler: 比較 Virtual DOM 的差異，比較差異後交給 Renderer 做渲染
- 在一次 render 執行的順序: 先 reconciler 再 renderer
- 第二次開始後才會有比較差異
- 後面會更詳細解釋
#### `ReactDOM.createRoot` 回傳的 root 是什麼?
- 不是 React element(不是畫面的一部分)，是一個 react 連接實際 DOM 容器的一個控制器
- root 可以用 render 和 unmount 兩個方法，都是 react dom 暴露出來的API
#### 學習技巧補充
- 本書作者 Zet 提到，在理解書上的內容之後，可以試著用==跟書上不同的內容、自己的理解、自己的話去練習講出來==，也才代表有真正內化相關的內容
- 另外，[脈絡連貫] 和 [語句上順不順暢] 是兩件不同的事情
- ==[脈絡連貫] 更重要==
- 踴躍描述書中概念，用自己的話講，以鞏固自己已知的知識
- 費曼技巧: 真正的學會技巧，要講到連阿嬤都懂
- 鼓勵大家多嘗試和身邊朋友同事說明
- learning how to learn: 持續不斷學習，每天一個知識點，讓腦內知識維持在高點，不限於 React
> Zet: 請按照書中的順序依序閱讀，才能好好理解
---
其他建議: 建議之後筆記工可傳筆記 hackmd 連結，大家一起共編減輕負擔