Celeste 技術儲藏室

使用 Redux Toolkit (RTK) 可以簡化傳統 Redux 的重複性操作。目前 Redux 也推薦使用 RTK。

RTK 創建 reducer 及生成對應 action

1. 安裝 RTK 包 npm install @reduxjs/toolkit。

2. 在 reducer 下創建 slice 檔案，使用 createSlice 創建 reducer 及 action。

   閱讀全文 »

結合 react 的 redux 使用方法

1. 下載 npm i react-redux

2. 透過 react-redux 中的 Provider 注入 Redux 的狀態給組件

   1 2 3 4 5 6 7 8 9 10 11

   // ...引入其他模組 import { Provider } from "react-redux"; import store from "./01.redux/store"; /* 1.透過 Provider 將 redux 儲存庫數據傳入到組件中 */ root.render( <StrictMode> <Provider store={store}> <RouterProvider router={router} /> </Provider> </StrictMode> );

   閱讀全文 »

本文使用的是 Redux Toolkit。

架構模式

作用: 透過一個單獨的 state 對象保存整個應用的狀態，這個 state 對象不能被直接修改，而是當某些數據發生變化後，透過 actions 及 reducers 來創建新的對象。

流程:

跨域(CORS)

跨域的定義: 因為瀏覽器的安全策略，非同源的數據不能直接訪問，必須協議、域名、端口號都必須相同才叫同源。

更多請參考: 跨來源資源共用（CORS）

通常解決方式: 後端解決、JSONP(只能處理 GET 請求)、反向代理。

路由驗證及攔截的快速方法

在需要登入的頁面中，需要先判斷是否已經被授權，有授權才可以進入指定頁面。

React-Router 提供了一個更簡便的方法，再進入該該路由前，先透過 loader 方法來進行驗證，而後透過 errorElement 來指定驗證不成功會進入哪個頁面。

https://reactrouter.com/en/main/route/error-element

測試用範例(使用 localStorage 做驗證測試)
假設進入 /home/message 要經過驗證，驗證不成功則返回 /login 頁面

React Router v6

標籤

路由定義: 根據不同的 url 地址顯示不同內容或頁面。

基礎使用:

1. 下載: 在專案中下載 react-router-dom 工具

   1	npm i react-router-dom

   補充: react-router-dom 是包含了 react-router (路由核心庫)，並添加一洩專用於 DOM 的組件。

2. 實現最小化 Demo，實現 Home 與 About 頁面的切換

   閱讀全文 »

Function Component 不存在生命週期，這也是為什麼 React 開始推薦使用函數組件的原因，可以減少學習成本。

useEffect()

作用: 為函數組件處理副作用。

副作用定義: 副作用是相對主作用來說的，一個函數除了主作用，其他的都是副作用。對 React 而言，主作用就是根據數據(state/props)渲染頁面，除此都是副作用。

常見副作用:

1. 手動修改 DOM
2. localStorage 操作
3. 數據請求 AJAX 發送

React 官方文檔:
每次 render 後都會執行 useEffect 嗎？ 是的！預設情況下，它在第一個 render 和隨後每一個更新之後執行。你可能會發現把 effect 想成發生在「render 之後」更為容易，而不是考慮「mount」和「更新」。 React 保證 DOM 在執行 effect 時已被更新。
每次重新 render 時，我們都會安排一個 different effect 來替代上一個。在某種程度上，這使 effect 的行為更像是 render 結果的一部分 — 每個 effect 都「屬於」特定的 render (useEffect 會在應用下一個 effect 之前，清除之前的 effect)。

狀態(state)使用方法 - useState()

1. 導入 useState 函數。
2. 調用 useState 函數，並傳入狀態初始值。
   const [數據名, 修改相應數據狀態方法] = useState(初始值)
3. 從 useState 函數返回值中，拿到狀態及修改狀態的方法。
4. 在 JSX 中展示狀態。
5. 調用修改狀態方法更新狀態。
   閱讀全文 »

再次重申： 本篇記錄只單紀錄 Function Component 的事件綁定。

事件綁定基本語法

事件的名稱在 React 中都是 camelCase，而在 HTML DOM 中則是小寫。
所以 onclick => onClick，onchange => onChange 以此類推。

相關配置說明

本次練習的 React 版本為 v18 並以 function component 作為主要講解及練習。

創建第一個 React 項目

• 全局安裝

  1 2	npm i -g create-react-app create-react-app 項目名

  閱讀全文 »