Flux架构小白入门笔记

lily_wang 发布于2019-08-22 10:45 / 2376人阅读

摘要：架构小白入门笔记是提出的一种处理前端数据的架构，学习就是学习它的思想。这个笔记是我在学习了阮一峰老师的架构入门教程之后得出，里面的例子和部分原文来自于其不同在于我用将其改写了，并加入了注释。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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