EP10 | React 18 全家桶複習 - React-Redux
結合 react 的 redux 使用方法
下載
npm i react-redux
透過 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>
);
EP08 | React 18 全家桶複習 - Redux
EP07 | React 18 全家桶複習 - React-Router (反向代理 proxy)
跨域(CORS)
跨域的定義: 因為瀏覽器的安全策略,非同源的數據不能直接訪問,必須協議、域名、端口號都必須相同才叫同源。
更多請參考: 跨來源資源共用(CORS)
通常解決方式: 後端解決、JSONP(只能處理 GET 請求)、反向代理。
EP06 | React 18 全家桶複習 - React-Router (路由驗證及攔截)
路由驗證及攔截的快速方法
在需要登入的頁面中,需要先判斷是否已經被授權,有授權才可以進入指定頁面。
React-Router 提供了一個更簡便的方法,再進入該該路由前,先透過 loader 方法來進行驗證,而後透過 errorElement 來指定驗證不成功會進入哪個頁面。
https://reactrouter.com/en/main/route/error-element
測試用範例(使用 localStorage 做驗證測試)
假設進入 /home/message 要經過驗證,驗證不成功則返回 /login 頁面
EP05 | React 18 全家桶複習 - React-Router
EP04 | React 18 全家桶複習 - Hooks的使用
Function Component 不存在生命週期,這也是為什麼 React 開始推薦使用函數組件的原因,可以減少學習成本。
useEffect()
作用: 為函數組件處理副作用。
副作用定義: 副作用是相對主作用來說的,一個函數除了主作用,其他的都是副作用。對 React 而言,主作用就是根據數據(state/props)渲染頁面,除此都是副作用。
常見副作用:
- 手動修改 DOM
- localStorage 操作
- 數據請求 AJAX 發送
React 官方文檔:
每次 render 後都會執行 useEffect 嗎? 是的!預設情況下,它在第一個 render 和隨後每一個更新之後執行。你可能會發現把 effect 想成發生在「render 之後」更為容易,而不是考慮「mount」和「更新」。 React 保證 DOM 在執行 effect 時已被更新。
每次重新 render 時,我們都會安排一個 different effect 來替代上一個。在某種程度上,這使 effect 的行為更像是 render 結果的一部分 — 每個 effect 都「屬於」特定的 render (useEffect 會在應用下一個 effect 之前,清除之前的 effect)。