淺談在React中使用Redux數據流(一)

1、數據流是什麼?爲什麼要用數據流?

1)數據流是行爲與響應的抽象。

用戶在頁面上輸入表單、按下按鈕、拖拽等行爲,頁面會根據用戶的行爲給出一些響應,如刷新、跳轉、局部刷新、Ajax局部刷新、數據更新等。以對象、方法來把它們抽象出來,這就是數據流。

2)使用數據流可以幫助我們明確行爲以及行爲對應的響應。

這與React的目標——狀態圖預測是密不可分的。

 

2、React與數據流的關係

React是純V的框架,只負責視圖,把視圖做成了組件化,不涉及任何的數據和控制,需要數據流進行支撐才能完成一個完整的前端項目。

 

3、主流的數據流框架有哪些?爲什麼使用Redux?

1)Flux:Facebook在推出React時推出了一套官方適配的、配合React來實現的數據流,現在是一種單項數據流或單向數據綁定的思想,但它非常重、非常大、實用性不太強,因此很多人做了很多改進,出現了很多第三方的數據流框架,比較出名的有reFlux和Redux。

2)reflux

3)Redux:在很多第三方數據流框架中有一些優勢:一是非常簡單;二是它維護了一棵單一的狀態樹。

 

4、單向數據流:

1)MVC

數據放在Model裏,View來控制顯示,Controller來做整體的管理。

隨着系統的龐大,會產生一些問題:交互時,當用戶有一個Action時,這個Action會分發到各個Model,如:上網shopping,提交訂單這一個動作會分解到有一條訂單要記錄下來、用戶賬戶會發生變化、優惠信息會發生變化,物流信息會發生變化,會影響庫存等。這麼多Model都要更新,更新後頁面上的多個View也會跟着變化,互相之間也會有影響,可能系統的狀態會變得不可預測,不知道下單後頁面會發生什麼變化。

2)Flux

用戶會有各種各樣的Action(行爲),所有的行爲由一個統一的Dispatcher去分發,一個Action只能分發到若干個Store裏面,Store保持着數據,也保存着當前頁面的狀態,根據用戶的行爲以及頁面當前的狀態,一個Store只能向視圖層傳遞信息,不允許視圖層反回來作用在Store上,視圖就會發生變化,再由用戶去傳入新的Action,這樣數據的流向是單向的。

 

5、Redux概述

Redux其實是Flux框架的一種實現方法。Redux與Flux的思想有點不同。

大概的過程:當一個頁面渲染完後,UI出現,用戶其實是觸發了UI上的一些Action,Action將會被送到Reducers方法裏,Reducers將會更新Store,數據就是React開發中的State,State其實是Store的一部分,所有的視圖層的東西,也就是組件,其實是由State來唯一決定的。



6、React概述

React可以認爲有以下三部分組成:

1)React.createClass():創建一個React組件

屬性this.props用於父子組件之間傳遞屬性;

屬性this.state用於表示組件本身的狀態,當state變化時,該組件會根據最新的state正確渲染出來;

方法render()中定義組件渲染成什麼樣子,應該是怎麼樣的一種呈現,在其中寫JSX;

方法需要了解生命週期。

2)ReactDOM.render():把組件(包括嵌套組件)渲染到頁面的某個節點上。

ReactDOM是在0.14版本之後才拆出來的,在之前是隻有React,統稱爲React。

3)各種屬性

一般不怎麼用到,在此不作敘述。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章