Jia Jia 隨筆紀錄

樂於學習及分享

2019-12-14

React、Redux相關個人筆記【持續更新】

紀錄個人撰寫React專案時學習到的一些重點

專案採用create-react-app方式

前置作業的環境建立之後再補上

 

以下內容採用類似筆記方式，都是我在撰寫期間了解到的功能 / 用法，可能會比較亂、甚至是看不懂，待日後會抽空重新整理

如果內容有誤歡迎糾正，我現在也是在學習中，想必會有相當多不懂、理解錯誤的部分，感謝

 

React

  1.  Component開頭必須為大寫，html元件基本為小寫，若是開頭改成大寫，則會被判斷成是Component組件
  2. Props繼承進來的變數是唯讀的，撰寫程式上請注意不要修改繼承的變數
  3. Component生命週期
    1. componentDidMount - 當Component 被render到畫面後執行
    2. componentDidUpdate - 當Component被重新render時執行
    3. componentWillUnmount - 當Component 被從 DOM 移除時執行
    4. componentDidCatch - 錯誤處理
  4. State區域變數用法
    1. 不要直接更新，請透過setState
    2. State本身是非同步的，故不太適合拿來做最新數值計算
  5. 迴圈寫法大多使用map方式
  6. State資料流是由上至下的，在儲存時須考慮到放哪裡適合
  7.  React.Lazy類似延遲載入，在尚未載入期間可以放加載動畫
    1. 必須放在<Suspense fallback="XXX"></Suspense>
    2. 加載動畫請放在fallback
  8. Import用法
    • import xxx from ‘...’;  用於使用export default的js(只輸出某預設function)
    • import {xxx} from ‘...’; 用於使用export的function(此寫法不限於js只能export一種function，大括號內需輸入要export的function Name)
    • import * as xxx from ‘...’; 用於使用所有export的function(跟上面相比，一個是只取「需要」的，一個是取「全部」)
  9. 專案並非需要Redux，大多數情況是可透過React解決(像是取得API的data，這種就不用特地使用到Redux)
  10. Fragment - 能在不增加額外 DOM 節點的情況重新組合 Child Component
    1. 寫法有兩種，分別是<Fragment></Fragment>、<></>
  11. render更新方式除了第一次呼叫換替換整個DOM element以外，後續更新都是採用局部替換(ReactDOM.render會針對異動部分進行畫面更新)

 

Redux

  1. Redux是用來管理所State(狀態)的工具，避免因State放在各自JS裡面造成後續難維護
  2. Redux的Action是用來修改Reducer的必要步驟，透過程式邏輯來修改Store，dispatch是用來發送/更新Action到Store的payload
  3. Redux的Action通常為了方便管理，會將多數Reducer放在一起，這時需要定義Action類別而宣告全域變數，這邊建議全域變數統一管理，這樣當Action需要取得指定Reducer時，在dispatch寫入宣告好的全域變數即可「項目4」
  4. export const ADD_TODO = 'ADD_TODO';
  5. Store只負責傳輸及儲存狀態用，對Store更新是Reducer的工作
  6. Reducer處理完後的內容需透過createStore去回傳給Store
  7. 整個專案只有一個Store，因此Reducer請合併撰寫
  8. Reducer的State參數本身是不可變的，因此作參數更新時，需透過Action去修改，但本身原始參數是不會被更動到
  9. Reducer的State是指Store內的State參數，若須取得參數，請透過Action去切換取得的內容，主要寫法為定義類別及搭配swtich...case...使用
  10. Reducer宣告為全域變數，用唯一值命名來管理(若要修改狀態則需使用同命名)，於整個專案環境的任一位置都可取出State，並透過mapStateToProps來使用
  11. mapStateToProps是用來將Store內的State對應到Component內的props，需搭配connect使用(不透過繼承，而是經由connect的Action將Store狀態取出來)
  12. mapDispatchToProps是接收dispatch並將Callback傳到Component內的props
  13. 需要根據每個container放入所需的State及Action「項目14內xxx的部分」
  14. export default connect(mapStateToProps,mapDispatchToProps)(XXX...);
  15. react-redux的connect用法是用來將State和Action綁定到Component，這邊有一點要注意是State接什麼資料取決於Action向Reducer發送什麼請求，整個頁面若要接受狀態變化，connect是必要功能「項目16」
  16. connect(需接收的State,要修改State狀態的Action)(需綁入的Component)
  17. bindActionCreators跟dispatch是相同功能，差別於前者可用於傳入大量參數，不用特地一個個去作Reducer和Action宣告
  18. Provider是讓所有Component都可以取得Store的工具，它只需要在Root Component使用一次即可(渲染到Index畫面的JS)，需使用store={...}去接收Store狀態
  19. Pure Component就是完全沒有State的Component
  20. Container是指雖然沒有存取State，但卻與Store串連，邏輯上就好像有自己的State

 

 

React-Router

  1. 使用 <Link to=”/檔案位置”>XXX</Link> 換頁，但不會重新整理頁面(SPA方式)\
  2. <Link to=””> 要搭配 <Route path=”\...” />
  3. Route內使用exact會變成嚴格模式，path要全符合才會渲染該組件
  4. 使用HashRouter可防止網頁重整時，因整段網址經過伺服器請求而回傳404錯誤
  5. switch用來包住多個Route，並在符合path時，指渲染第一個符合條件的Route
  6. Redirect是用來轉址，雖然使用Link仍可轉換畫面，但網址上會被更改成指定網址
  7. Redirect可利用State傳值到指定畫面，於接收處的Route的Component打上this.props.location.state即可
  8. Route可使用Component去渲染出畫面

 

 

Middleware

  1. 中介軟體，用來處理Request到Response這段途徑上的過程

 

 

React-Thunk

  1. 使Action能執行非同步的效果，本身屬於Async funciton
  2. 需綁入createStore使用，搭配Redux的applyMiddleware才有功能

系列文章

標籤雲