Hex School 六角學院於近期新開了一份 React 新手讀書會課程,對於激勵自身於工作之餘的進修很有效果。這篇筆記下第一週的相關心得和作法。
內容
1. ES6 的語法是必須的,特別是陣列物件解構、展開運算子、Array.map() 等
2. 瀏覽器端請安裝 React Developer Tools
3. React 很常使用 onClick 來監聽事件,並使用 JSX ( JavaScript and XML )
4. 資料跟 HTML 元素分離,這就是框架的優勢。資料一更新, HTML 就會自動更新
5. 環境建立: React 環境、解析 JSX、自己的 JS
6. JSX 樣板,是可以直接放 HTML 結構的,不需要引號
7. 簡單區分:有回傳值的為表達式,其餘為陳述式。不過若你僅是陳述一個 function,內有回傳值但沒呼叫,那還是陳述式 (你陳述一個 function)
8. render 的模版內,要放表達式。
9. JSX 中為避免撞名,使用 className 來渲染成 class
10. 通常 root 渲染只會做一次,其餘的會在裡頭裝上 component 執行
11. 元件 Component 的第一個字母要大寫。在 React 中,函式就是一個元件。
12. 元件內可以傳進參數,函數中用 props 來接
13. 元件內必須且僅能有一層最外層,你可以使用 <> </> 來當做如同 vue 的 template,它不會渲染到畫面上
14. React useState 類似 Vue3 的 ref, reactive
15. 若想要「即時更新資料」,你需要使用 useState,這樣一來值才會即時更新
16. useState 會回傳一個包含兩個值的 array:第一個值是 state、第二個值是用來更新 state 的函式。每當 state 值改變,就會觸發重新渲染。因此,你可以宣告多個 State
17. 更新 State 的函式,若傳入 state 是等同於每次執行都重設值;傳入 function 則是會保留先前的值
18. 如果你的變數並沒有經常或是需要在畫面上呈現,就不必使用 useState
參考資料
1. [React Hook 筆記] 從最基本的useState, useEffect 開始