Flux架構小白入門筆記

lily_wang 發布于2019-08-22 10:45 / 2218人閱讀

摘要：架構小白入門筆記是提出的一種處理前端數據的架構，學習就是學習它的思想。這個筆記是我在學習了阮一峰老師的架構入門教程之后得出，里面的例子和部分原文來自于其不同在于我用將其改寫了，并加入了注釋。

Flux架構小白入門筆記

Flux是facebook提出的一種處理前端數據的架構，學習Flux就是學習它的思想。

這個筆記是我在學習了阮一峰老師的Flux 架構入門教程之后得出，
里面的例子和部分原文來自于其,不同在于我用es6將其改寫了，并加入了注釋。

做了兩三個前端外包項目，都是后端提供數據接口，邏輯主要由前端完成，深感前端邏輯之復雜，
特別是最近的一個項目，到后期業務邏輯代碼混在一起根本無法維護。于是痛定思痛，想下定決心研究下前端架構方案，
而Flux則是現在最火，最受好評的前端架構方案。

本例代碼倉庫:flux_learn,喜歡的話給個star哦！

我們按Flux數據流的順序來分析，

View發起Action->Action傳遞到Dispatcher->Dispatcher將通知Store->Store的狀態改變通知View進行改變

View由React組件構成，首先是MyButton.js

import React, {Component} from "react"

class MyButton extends Component {

    render() {
        let items = this.props.items;
        return (
            
                
                    {items.map((result, key) => {
                        return (
                            {result}
                        )
                    })}
                
                
            
        )
    }
}

export default MyButton

額，這個組件貌似沒啥好講的，會React和es6的一下就能看懂。。。

接下來是由對MyButton進行封裝的MyButtonController.js

import React, {Component} from "react"
import MyButton from "app/components/MyButton"
import listStore from "app/stores/listStore"
import ButtonActions from "app/actions/ButtonActions"

//對Action發生器進行初始化，buttonActions能發出不同類型action給Dispatcher
let buttonActions = new ButtonActions()

class MyButtonController extends Component {

    constructor(props) {
        //把props作為參數傳遞到super(),這樣在constructor里即可訪問this.props屬性
        super(props)
        this.state = {
            items: []
        }
    }

    componentDidMount() {
        //在組件掛載后綁定組件的私有方法_onChange到Store,之后listStore狀態變化即可通知組件調用_onChange方法進行改變
        listStore.addChangeListener(this._onChange.bind(this))
    }

    componentWillUnmount() {
        //在組件移除后解除綁定組件的私有方法_onChange到Store
        listStore.removeChangeListener(this._onChange.bind(this))
    }

    //組件響應Store變化的回調函數
    _onChange() {
        this.setState({
            items: listStore.getAll()
        })
    }

    render() {
        return (
            
        )
    }

    createNewItem() {
        //調用Action發生器發出增加Item的Action
        buttonActions.addNewItem("new item")
    }
}

export default MyButtonController

在我們點擊新增按鈕后調用createNewItem方法發出一個"ADD_NEW_ITEM"的Action到Dispatcher

接下來我們看看ButtonActions.js

import AppDispatcher from "app/dispatcher/AppDispatcher"

class ButtonActions {

    //發送ADD_NEW_ITEM的Action的方法
    addNewItem(text) {
        //調用Dispatcher獲取actionType為ADD_NEW_ITEM的Action
        AppDispatcher.dispatch({
            actionType: "ADD_NEW_ITEM",
            text: text
        })
    }
}

export default ButtonActions

這里的addNewItem方法發起了一個actionType為ADD_NEW_ITEM的Action到Dispatcher

然后我們再看AppDispatcher.js

import flux from "flux"
import listStore from "app/stores/listStore"

//拿到flux模塊里的Dispatcher類
let Dispatcher = flux.Dispatcher;
//用Dispatcher類new一個AppDispatcher對象
let AppDispatcher = new Dispatcher();

//調用register方法注冊接收到各種actionType的Action之后的回調函數
AppDispatcher.register(function (action) {
    switch (action.actionType) {
        case "ADD_NEW_ITEM":
            listStore.addNewItemHandler(action.text)
            listStore.emitChange()
            break;
        default:
    }
})

export default AppDispatcher

最后是ListStore.js

import EventEmitter from "events"

class ListStore extends EventEmitter {

    constructor() {
        super()
        //初始化數據
        this.items = []
    }
    
    //返回所有數據的方法
    getAll() {
        return this.items
    }

    //增加數據的處理函數
    addNewItemHandler(text) {
        this.items.push(text)
    }

    //提交變化
    emitChange() {
        this.emit("change")
    }

    //監聽函數，當有變化時調用注冊的回調方法
    addChangeListener(callback) {
        this.on("change", callback)
    }

    //remore監聽函數
    removeChangeListener(callback) {
        this.removeListener("change", callback)
    }
}

//new一個listStore作為單例暴露給其它模塊使用
let listStore = new ListStore()

export default listStore

它負責記錄數據和狀態并在有變化時改變View

GPU云服務器云服務器 flux架構服務器架構筆記 java開發入門筆記 Flux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91203.html

React學習筆記 - 對Flux的理解

摘要：學習是一個漸進和修正的過程。學習在一定程度上是一個試錯的過程。唯有有了一個理解，才能檢驗對錯。對的理解上有句話是說，編程無外乎兩件事，組合和抽象。處理這些變化的責任由和共同完成。具體來說，是針對一類數據進行操作，比如評論。本文僅僅是對Flux的個人理解，做交流之用，如果錯誤，還望大家指出！剛才用了1個多小時，看了一下Flux，想說一下自己的理解。可能大家會覺得，只花了這么少的時間，...

yanest 2019-08-20 13:33 評論0 收藏0
從小白程序員一路晉升為大廠高級技術專家我看過哪些書籍？（建議收藏）

摘要：大家好，我是冰河有句話叫做投資啥都不如投資自己的回報率高。馬上就十一國慶假期了，給小伙伴們分享下，從小白程序員到大廠高級技術專家我看過哪些技術類書籍。大家好，我是...

sf_wangchong 2021-09-29 09:35 評論0 收藏0
Flux 應用架構

摘要：應用架構是用來構建客戶端應用的一種應用架構體系。它是一種類似的架構，但是它更加簡單清晰，是一種單向數據流的架構設計。將數據和動作類型傳遞給去分發數據流是一個包含所有動作類型的常量對象一個分發中心，它管理著應用的所有數據流向。 Flux 應用架構 Flux是Facebook用來構建客戶端Web應用的一種應用架構體系。它是一種類似MVC的架構，但是它更加簡單、清晰，是一種單向數據流的架構設...

Jonathan Shieber 2019-08-19 18:21 評論0 收藏0
Flux 應用架構

摘要：應用架構是用來構建客戶端應用的一種應用架構體系。它是一種類似的架構，但是它更加簡單清晰，是一種單向數據流的架構設計。將數據和動作類型傳遞給去分發數據流是一個包含所有動作類型的常量對象一個分發中心，它管理著應用的所有數據流向。 Flux 應用架構 Flux是Facebook用來構建客戶端Web應用的一種應用架構體系。它是一種類似MVC的架構，但是它更加簡單、清晰，是一種單向數據流的架構設...

songjz 2019-06-24 17:51 評論0 收藏0
[譯]Flux入門

摘要：正式入坑我將按順序解釋概念，并且一個一個地構建它們。視圖的和調度員本質上是一個加入了額外規則的事件系統。它來廣播事件并注冊回調。這描述了我們的，我們稱之為。然后，會響應已分派的操作這是處理調度回調的傳統方式。原文地址：https://blog.andrewray.me/flu... ，作者：Andrew Ray TL;DR 當我在努力學習Flux時，我希望有人告訴我：它并不簡單，也沒...

Ashin 2019-08-26 13:25 評論0 收藏0