1. 資料傳遞方向：從 父元件 傳遞到 子元件

• callback （超過2層的巢狀），則需要 使用reducer、context
• context =》provider：無需 以及一級的傳遞 ；上下文，可被所的巢狀點訪問 =》 子元件間 聯動、跨層級 聯動

2. state：修改屬性； propers： 可讀不可寫

• usestate 太多，建議使用 context；否則 會影響效能

3.  命名規則：

• 小駝峰 =》屬性名、方法名、
• 大駝峰 =》元件名；
• 元件名 & 檔名相同
• 元件 only 一個根節點 =》div 包裹

4. 跨檔案： 公共元件  =》export、import。

• 僅一個檔案內，則無需 export、import

5. 單執行緒渲染 =》建議 非同步操作

6. useEffect=》 何時渲染

• 每次都渲染；首次渲染；變數變化時，才渲染

7.AntDesign：

• 元件多； 社群活躍；提交建議 反應速度快；
• 虛擬渲染：提高效率；只渲染 UI展示的資料；

6. 公用元件

• javascript： 弱型別 =》.d.ts檔案： 智慧提示；增加註釋
• typescript：強型別

7. 環境按照

1. 安裝node
2. 元件依賴、版本依賴、元件 安裝：yarn install  =》webpack.config.js & package.json 不要隨意修改
3. =》設定 代理映象源：淘寶 =》加速安裝程序
4. 啟動 yarn start ：正常

8. 除錯

• 1. 單獨UI的除錯
• mock data 用於 UI除錯 =》與 後端服務 啟動無關。
• 2. debugger，cosole.log() =》前後端聯調
• 3. 瀏覽器工具：sources =》page =》目標檔案=》斷點定位
  •  

     

     設定 斷點 =》除錯

     

• 4. visual code 內建除錯引擎 ：設定斷點
  •  

    開啟 3000的 埠監聽