浅说Flux开发

标签: Web前端 flux react | 发表时间:2015-12-02 15:45 | 作者:dwqs
出处:http://www.ido321.com

前段时间,写了篇关于React的文件: React:组件的生命周期,比较详细的说了下React组件的生命周期。

说道 React,很容易可以联想到 Flux。今天以 React 介绍及实践教程 一文中的demo为示例,简单说说 Flux 的开发方式。

Flux是什么

Flux 是 Facebook 用户建立客户端 Web 应用的前端架构, 它通过利用一个单向的数据流补充了 React 的组合视图组件。

Flux 的设计架构如图:

Flux

Flux 架构有三个主要部分:Dispatcher 、Store 和View(React 组件)。Store 包含了应用的所有数据,Dispatcher 负责调度,替换了 MVC中 的Controller,当 Action 触发时,决定了 Store 如何更新。当 Store变化后,View 同时被更新,还可以生成一个由Dispatcher 处理的Action。这确保了数据在系统组件间单向流动。当系统有多个 Store 和 View 时,仍可视为只有一个 Store 和一个 View,因为数据只朝一个方向流动,并且不同的 Store 和 View 之间不会直接影响彼此。

Flux的简单开发

在颜色盘的demo中,对界面的组件划分是这样的:

demo

用户在 ColorPanel(View) 上产生一个 Action,Action 将数据流转到 Dispatcher,Dispatcher 根据 Action 传递的数据更新 Store,当 Store变化后,View 同时被更新。

(若你要获取本文的源代码,可以戳此: Flux-Demo

Store

Store 包含了应用的所有数据,并负责更新 View(ColorPanel),为简单,简化 Store 的定义:

  let EventEmitter = require('events').EventEmitter;
let emitter = new EventEmitter();

export let colorStore = {
    colorId: 1,

    listenChange(callback){
        emitter.on('colorChange', callback);
    },

    getColorId(){
        return this.colorId
    },

    setColorId(colorId){
        this.colorId = colorId;
        emitter.emit('colorChange');
    }
};

Dispatcher

Action 要靠 Dispatcher 去调度,才能更新 Store,并有 Store 去更新对应的 View 组件。定义一个 colorDispatcher 用于调度:

  import {Dispatcher} from 'flux';
import {colorStore} from './colorStore';

export let colorDispatcher = new Dispatcher();

colorDispatcher.register((payload) => {
    switch (payload.action){
        case 'CHANGE_COLOR_ID':
            colorStore.setColorId(payload.colorId);
            break;
    }
});

Action

当鼠标悬浮在 ColorBar 中的一个颜色框时,根据颜色框 ID 的变化,ColorDisplay 显示对应的颜色。我们定义一个 Action 为 CHANGE COLORID:

  import {colorDispatcher} from './colorDispatcher';

export let colorAction = {
    changeColorId(colorId){
        colorDispatcher.dispatch({
            action: 'CHANGE_COLOR_ID',
            colorId: colorId
        })
    }
};

建议定义的 Action 符合 FSA 规范。

View

按照上图的组件划分,我们渲染出界面:

ColorDisplay:

  import React, {Component} from 'react';

class ColorDisplay extends Component {
    shouldComponentUpdate(nextProps, nextState){
        return this.props.selectedColor.id !== nextProps.selectedColor.id;
    }

    render(){
        return (
            <div className = 'color-display'>
                <div className = {this.props.selectedColor.value}>
                    {this.props.selectedColor.title}
                </div>
            </div>
        )
    }
}

export default ColorDisplay;

ColorBar:

  import React, {Component} from 'react';
import {colorAction} from '../flux/colorAction';
import {colorStore} from '../flux/colorStore';

class ColorBar extends Component {
    handleHover(colorId){
        let preColorId = colorStore.getColorId();
        if(preColorId != colorId){
            colorAction.changeColorId(colorId);
        }
    }

    render(){
        return (

            <ul>
                {/* Reaact中循环渲染元素时, 需要用key属性确保正确渲染, key值唯一*/}
                {this.props.colors.map(function(color){
                    return (
                        <li key = {color.id}
                            onMouseOver = {this.handleHover.bind(this, color.id)}
                            className = {color.value}>
                        </li>
                    )
                }, this)}
            </ul>
        )
    }
}

export default ColorBar;

ColorPanel:

  import React, {Component} from 'react';
import ColorDisplay from './colorDisplay';
import ColorBar from './colorBar';
import {colorStore} from '../flux/colorStore'

class ColorPanel extends Component {
   
    constructor(props){
        super(props);
        this.state = {
            selectedColor: this.getSelectedColor(colorStore.getColorId())
        };
        colorStore.listenChange(this.onColorHover.bind(this));
    }

    getSelectedColor(colorId){
        if(! colorId){
            return null
        }

        let length = this.props.colors.length;
        let i;
        for(i = 0; i < length; i++) {
            if(this.props.colors[i].id === colorId){
                break;
            }
        }
        return this.props.colors[i];
    }

    shouldComponentUpdate(nextProps, nextState){
        return this.state.selectedColor.id !== nextState.selectedColor.id;
    }

    render(){
        return (
            <div>
                <ColorDisplay selectedColor = {this.state.selectedColor} />
                <ColorBar colors = {this.props.colors}  />
            </div>
        )
    }

    onColorHover(){
        let colorId = colorStore.getColorId();
        this.setState({
            selectedColor: this.getSelectedColor(colorId)
        })
    }
}

ColorPanel.defaultProps = {
    colors: [
        {id: 1, value: 'red', title: 'red'},
        {id: 2, value: 'blue', title: 'blue'},
        {id: 3, value: 'green', title: 'green'},
        {id: 4, value: 'yellow', title: 'yellow'},
        {id: 5, value: 'pink', title: 'pink'},
        {id: 6, value: 'black', title: 'black'}
    ]
};

export default ColorPanel;

App:

  var ReactDom = require('react-dom');
import React from 'react';
import ColorPanel from './panel/colorPanel';

require('./app.css');

window.onload = function () {
    ReactDom.render(<ColorPanel />, document.getElementById('demos'));
}

最终的的界面如下:

react-started

总结

本文简单的说了下如何利用 Flux 去开发实际应用,对于负载要求不高的应用,Flux 是完全可以使用的,复杂的富应用则可以借助 Redux + React 构建, Redux 负责数据分发和管理,其数据流的可控性比 Flux 更强,React 则依旧负责 View,但二者并不能直接连接,需要依赖 react-redux

若你要获取本文的源代码,可以戳此: Flux-Demo

转载请注明: 淡忘~浅思 » 浅说Flux开发

相关 [flux 开发] 推荐:

浅说Flux开发

- - 淡忘~浅思
前段时间,写了篇关于React的文件: React:组件的生命周期,比较详细的说了下React组件的生命周期. 说道 React,很容易可以联想到 Flux. 今天以 React 介绍及实践教程 一文中的demo为示例,简单说说 Flux 的开发方式. Flux 是 Facebook 用户建立客户端 Web 应用的前端架构, 它通过利用一个单向的数据流补充了 React 的组合视图组件.

谷歌的 FLUX 将变革建筑业吗?

- - 知乎每日精选
朋友圈 @范凌教主戳了下,来答一下~ @Tiger Li 说的迟早会,其实潜移默化中已经在改变建筑业了,颠覆的可能性目前看来还没出现. 这个问题毫无疑问是建筑业和互联网业的一个重要事件,刚看到这个问题我赶紧去请教了下身边的几个建筑师,互联网业朋友. 也看了下几个高分回答,大致整理出来了个捣乱顺序:.

Android开发Tips

- - CSDN博客推荐文章
欢迎Follow我的 GitHub, 关注我的 CSDN.. 介绍一些, 在Android开发中, 会经常使用的小知识点.. submodule与git可以保持实时同步. 导入, 路径多于一个, 前面不添加冒号(:).. 使用PackageManager.. // 检查App是否安装 private boolean appInstalledOrNot(String uri) {.

WPS for Linux 开发中

- Quantum - Wow! Ubuntu
据消息称,WPS for Linux 办公套件目前正在开发中,如图:. # 本文采用CC协议进行授权,转载本文请注明本文链接. - Twitter / 微博 / 问答 / 投稿 / 加入我们 wow0slx6bcs721xo1udcc. - 高性价比 Ubuntu VPS / 本站架设于 PhotonVPS / 定制 Ubuntu T-Shirt.

iOS开发资源

- - Starming星光社最新更新
iOS App UI 欣赏、分享精美的App界面设计. iOS代码实例搜索、iOS特效示例、iOS代码例子下载. 以web的形式提供iOS UI设计的素材,你可以在web上拖动一些控件做出简单的ios 应用效果,并且生成一个URL,能分享给其他人. 一款 Photoshop 插件,由 UI Parade 推出的一款针对iOS UI 的设计工具,设计师动动鼠标即可制作精美的 iOS 应用原型.

开发笔记(1)

- liuce.cn - 云风的 BLOG
折腾了好久,终于可以开始正式项目开发了. 之前的这段日子,我们陷落在公司的股权分配问题中,纠结于到底需要几个人到位才启动;更是反复讨论,到底应该做个怎样的游戏. 林林总总,终于,在已经到位的几位同学的摩拳擦掌中,叮当决定自己挂帅开始干了. 就这么不到十个人,空旷的办公室,跟我们起先想像的情况不太一样.

Jenkins的plugin开发

- - CSDN博客研发管理推荐文章
       Jenkins强大的功能主要靠其丰富的plugin体现,之前的一篇博客《 Jenkins安装plugin》中介绍了如何找到并安装需要的plugin. 虽然目前已经有大量非常优秀的plugin可供使用,但是有时候仍需要自己开发一些满足项目特殊要求的plugin. 下面通过一个简单实例,介绍Jenkins的plugin的整个开发过程.

kettle 开发总结

- - CSDN博客推荐文章
2.在用file exists 控件的时候,当用到“文本文件输入”时,文本文件中需要一定的格式,类似下图:. ;当然也可以已经创建了相应的表,然后直接按“确定”按钮就行,如果相应的表和输入的列数及列属性不一样时,也可以在sql按钮的语句中取修改. 在使用file exists时,输入也可以用表输入.

kafka开发实例

- - 互联网 - ITeye博客
//启动zookeeper server (用&是为了能退出命令行):. //启动kafka server: . 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

Nginx模块开发入门

- ripwu - 博客园-EricZhang&#39;s Technology Blog
Nginx是当前最流行的HTTP Server之一,根据W3Techs的统计,目前世界排名(根据Alexa)前100万的网站中,Nginx的占有率为6.8%. 与Apache相比,Nginx在高并发情况下具有巨大的性能优势. Nginx属于典型的微内核设计,其内核非常简洁和优雅,同时具有非常高的可扩展性.