react的基本概念

来源:https://www.cnblogs.com/wheatCatcher/archive/2018/03/01/8489656.html
-Advertisement-
Play Games

數據流向 數據的改變發生通常是通過用戶交互行為或者瀏覽器行為(如路由跳轉等)觸發的,當此類行為會改變數據的時候可以通過 dispatch 發起一個 action,如果是同步行為會直接通過 Reducers 改變 State ,如果是非同步行為(副作用)會先觸發 Effects 然後流向 Reducer ...


數據流向

數據的改變發生通常是通過用戶交互行為或者瀏覽器行為(如路由跳轉等)觸發的,當此類行為會改變數據的時候可以通過 dispatch 發起一個 action,如果是同步行為會直接通過 Reducers 改變 State ,如果是非同步行為(副作用)會先觸發 Effects 然後流向 Reducers 最終改變 State,所以在 dva 中,數據流向非常清晰簡明,並且思路基本跟開源社區保持一致(也是來自於開源社區)。

Models

State

type State = any

State 表示 Model 的狀態數據,通常表現為一個 javascript 對象(當然它可以是任何值);操作的時候每次都要當作不可變數據(immutable data)來對待,保證每次都是全新對象,沒有引用關係,這樣才能保證 State 的獨立性,便於測試和追蹤變化。

在 dva 中你可以通過 dva 的實例屬性 _store 看到頂部的 state 數據,但是通常你很少會用到:

const app = dva();
console.log(app._store); // 頂部的 state 數據

Action

type AsyncAction = any

Action 是一個普通 javascript 對象,它是改變 State 的唯一途徑。無論是從 UI 事件、網路回調,還是 WebSocket 等數據源所獲得的數據,最終都會通過 dispatch 函數調用一個 action,從而改變對應的數據。action 必須帶有 type 屬性指明具體的行為,其它欄位可以自定義,如果要發起一個 action 需要使用 dispatch 函數;需要註意的是 dispatch 是在組件 connect Models以後,通過 props 傳入的。

dispatch({
  type: 'add',
});

dispatch 函數

type dispatch = (a: Action) => Action

dispatching function 是一個用於觸發 action 的函數,action 是改變 State 的唯一途徑,但是它只描述了一個行為,而 dipatch 可以看作是觸發這個行為的方式,而 Reducer 則是描述如何改變數據的。

在 dva 中,connect Model 的組件通過 props 可以訪問到 dispatch,可以調用 Model 中的 Reducer 或者 Effects,常見的形式如:

dispatch({
  type: 'user/add', // 如果在 model 外調用,需要添加 namespace
  payload: {}, // 需要傳遞的信息
});

Reducer

type Reducer<S, A> = (state: S, action: A) => S

Reducer(也稱為 reducing function)函數接受兩個參數:之前已經累積運算的結果和當前要被累積的值,返回的是一個新的累積結果。該函數把一個集合歸併成一個單值。

Reducer 的概念來自於是函數式編程,很多語言中都有 reduce API。如在 javascript 中:

[{x:1},{y:2},{z:3}].reduce(function(prev, next){ 
    return Object.assign(prev, next); 
})
//return {x:1, y:2, z:3}

在 dva 中,reducers 聚合積累的結果是當前 model 的 state 對象。通過 actions 中傳入的值,與當前 reducers 中的值進行運算獲得新的值(也就是新的 state)。需要註意的是 Reducer 必須是純函數,所以同樣的輸入必然得到同樣的輸出,它們不應該產生任何副作用。並且,每一次的計算都應該使用immutable data,這種特性簡單理解就是每次操作都是返回一個全新的數據(獨立,純凈),所以熱重載和時間旅行這些功能才能夠使用。

Effect

Effect 被稱為副作用,在我們的應用中,最常見的就是非同步操作。它來自於函數編程的概念,之所以叫副作用是因為它使得我們的函數變得不純,同樣的輸入不一定獲得同樣的輸出。

dva 為了控制副作用的操作,底層引入了redux-sagas做非同步流程式控制制,由於採用了generator的相關概念,所以將非同步轉成同步寫法,從而將effects轉為純函數。至於為什麼我們這麼糾結於 純函數,如果你想瞭解更多可以閱讀Mostly adequate guide to FP,或者它的中文譯本JS函數式編程指南

Subscription

Subscriptions 是一種從 源 獲取數據的方法,它來自於 elm。

Subscription 語義是訂閱,用於訂閱一個數據源,然後根據條件 dispatch 需要的 action。數據源可以是當前的時間、伺服器的 websocket 連接、keyboard 輸入、geolocation 變化、history 路由變化等等。

import key from 'keymaster';
...
app.model({
  namespace: 'count',
  subscriptions: {
    keyEvent(dispatch) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  }
});

Router

這裡的路由通常指的是前端路由,由於我們的應用現在通常是單頁應用,所以需要前端代碼來控制路由邏輯,通過瀏覽器提供的 History API 可以監聽瀏覽器url的變化,從而控制路由相關操作。

dva 實例提供了 router 方法來控制路由,使用的是react-router

import { Router, Route } from 'dva/router';
app.router(({history}) =>
  <Router history={history}>
    <Route path="/" component={HomePage} />
  </Router>
);

Route Components

組件設計方法中,我們提到過 Container Components,在 dva 中我們通常將其約束為 Route Components,因為在 dva 中我們通常以頁面維度來設計 Container Components。

所以在 dva 中,通常需要 connect Model的組件都是 Route Components,組織在/routes/目錄下,而/components/目錄下則是純組件(Presentational Components)。

參考引申


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 要求 必備知識 windows 7 基本操作。 運行環境 windows 7(64位); eclipse-jee-luna-SR2-win32(32位);ADT-23.0.4 下載地址 環境下載 要求 必備知識 windows 7 基本操作。 運行環境 windows 7(64位); eclipse ...
  • 前言 2018年3月1日 農曆正月十四 星期四 不知怎麼地,一大早上班就想寫博客; Xcode代碼塊 開發中,都不想寫過多代碼,然後就會用這種方法,去簡化代碼,包括MVVM框架,它也體現出來了去簡化C裡面的那些垃圾代碼;其實在編寫時,Xcode本身也為我們提供了,提高編寫效率的捷徑-代碼塊,就是下麵 ...
  • 一、字體屬性 1.預設字體系列 chrome/opera:"宋體" firefox:"微軟雅黑" safari/IE:Times,"宋體" 2.字體屬性 字體類型 font-family 初始化時定義字體類型,如宋體 字體大小 font-size 應用於: 所有元素 繼承性: 有 百分數: 相對於父 ...
  • 1:閉包 1>概念:閉包就是能夠讀取其他函數內部變數的函數。在JS中,只有函數內部的子函數才能讀取局部變數,因此可以把閉包簡單理解為”定義在一個函數內部的函數”。 2>閉包的特點 1)可以讀取函數內部的變數。 2)讓這些變數的值始終保存在記憶體中。 3>閉包的原理 理解閉包,首先必須理解JS變數的作用 ...
  • 前面的話 使用Facebook官方推出的create-react-app腳手架,我們基本可以零配置搭建基於webpack的React開發環境。但是,如果需要個性化定製,則還需要基於create-react-app進行再配置 環境變數 在根目錄下新建.env.local文件,可以用於本地環境變數覆蓋 ...
  • 一、何為cookie 由於http協議是無狀態的,所以沒法知道當前訪問的客戶端是誰,所以有了cookie這個東西,通過cookie來讓服務端知道當前是誰訪問我,可以看做是一個身份牌 二、cookie的工作流程 (1) 第一次用戶登錄的時候,輸入用戶名和密碼信息,服務端接收後進行用戶認證。 (2)服務 ...
  • 一、水平居中: (1). 行內元素的水平居中? 如果被設置元素為文本、圖片等行內元素時,在父元素中設置text-align:center實現行內元素水平居中,將子元素的display設置為inline-block,使子元素變成行內元素 (2)塊狀元素的水平居中(定寬) 當被設置元素為定寬塊級元素時用 ...
  • 前言: 考慮自己網站的圖片展示,而且要支持移動端和PC端。自己寫的代碼也不盡如意,要寫好的話也需要時間,於是就想到了使用相關插件。 準備: PhotoSwipe 官網地址:http://photoswipe.com/ 英語還可以的同學可以看官方文檔學習:http://photoswipe.com/d ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...