React Rebix 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
React Rebix 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
React Rebix 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
React Rebix 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
React Rebix 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

React的一个单向数据流框架。

优点

内部实现依赖于Redux。但是简化了Redux的使用方法。

  1. action层只需要返回action方法的处理结果,无需action去dispatch处理的结果。

  2. store层,无需写大量的switch判断,而是采用reflux的风格,直接使用onXXXX来响应Action的处理。

  3. view层无需自己去依赖action和store层,而是直接采用简单的配置,就能自动将action和store中的数据绑定到组件的props中。

  4. view层中调用的action方法如果是异步方法会将返回值中的promise对象透传到view层。

  5. action层和view层,都可以直接访问store中的Get方法。但是view层和action层,都无法访问store中的非get方法。这样既能保证调用的灵活性,又能保证数据流的单向流动。

  6. 跟其他框架相比,用户省去了大量自己手动书写的对数据的pub/sub的代码。

安装

npm install --save react-rebix

使用

import Rebix from 'react-rebix';

OR

<script src="/node_modules/react/dist/react.min.js"></script>
<script src="/node_modules/react-dom/dist/react-dom.js"></script>
<script src="/node_modules/react-rebix/dist/react-rebix.min.js"></script>

示例

TodoMVC 

https://github.com/ubibi/rebix-todo-demo


https://github.com/luanhaipeng/rebix/tree/master/example/example

Action

Action中可访问Store中的getXXX方法,其他方法不能访问。

支持三种Action

  1. 异步 Action, 一定要返回一个Promise对象

  2. 普通 Action,直接返回处理结果的js对象。

  3. 空Action, 不需要具体的实现,具体操作在Store中完成.

import Rebix from 'react-rebix';
import UserStore from '../stores/UserStore';

export default Rebix.createActions({

    /**
     * 异步 Action
     * 一定要返回一个Promise对象
     */
    getUserInfo: function (params) {

        //Action 中可以访问Store中的数据。但是只能调用get方法。
        //Store 中的其他方法,不会对外暴露,这样方便了数据的访问,同时又保证了数据的单向流动。
        var userInfo = UserStore.getUserInfo(123);

        return new Promise(function (resolve) {
            setTimeout(function () {
                //store层使用action.promise字段接受返回值
                resolve({
                    time: new Date().getTime(),
                    userInfo: userInfo,
                    params: params
                });
            }, 1000)
        })
    },


    /**
     * 普通 Action
     */
    getUserList: function (params) {
        //store层使用action.payload字段接受返回值
        return [1, 2, 3, params];
    },


    /**
     * 空Action, 不需要具体的实现
     * 具体操作在Store中完成.
     */
    beginEditUserInfo: null,

    /**
     * 空Action, 不需要具体的实现
     * 具体操作在Store中完成.
     */
    endEditUserInfo: null

});

Store

Store中的数据存储,强烈建议使用immutable,这里为了演示方便,通过Object.assign({}, state)创建了一个新对象。

说明:

  1. 为了保证数据的单向流动,通过CreateStore创建的onXXXX函数,view层和action层根本调用不到。

  2. 为了方便action和view层使用数据,通过CreateStore创建的getXXXX函数,view层和action层都可以调用到。

  3. 一般来说action文件和store文件是一一对应的,但是有时候一个action的处理结果需要几个store层各自处理。这里提供了加井号前缀的方式实现。比如:post#onGetPostList(在UserStore中响应PostAction的结果。)

import Rebix from 'react-rebix';


export default Rebix.createStore({

    initialState: {
        userList: [],
        postList: []
    },

    //类似Reflux。Action中的处理结束后,会把数据传递给Store
    //这里处理:action中方法 getUserList 的返回值。
    'onGetUserList': function (state, action) {
        console.log(action.status);
        state = Object.assign({}, state);
        var userList = action.payload;
        state.userList = userList;
        return state;
    },


    //处理action中beginEditUserInfo的行为。
    'onBeginEditUserInfo': function (state) {
        state = Object.assign({}, state);
        state.isEditing = true;
        return state;
    },

    //处理action中onEndEditUserInfo的行为。
    'onEndEditUserInfo': function (state) {
        state = Object.assign({}, state);
        state.isEditing = false;
        return state;
    },


    /**
     * 为了响应其它Action方法中的处理,要加#前缀
     */
    'post#onGetPostList': function (state, action) {
        console.log(action.status);
        if (action.status === 'success') {
            state = Object.assign({}, state);
            var postList = action.payload;
            state.postList = postList;
        }

        return state;
    },


    /**
     * Get函数,修改state不管用.state内部一般都是使用immutable对象,只有on函数的返回值才能对state进行修改.
     * View 层,可以直接调用Get函数获取Store中的数据,但是无法修改.
     * 在Get函数内部对state的任何修改,都不会生效.
     */
    'getUserInfo': function (state, a, b, c, d) {
        return {
            name: a
        };
    }


});

Config

通过Config,将action、store等资源集中起来。这样的目的是为了在view层,无需再引入大量的action、store的js文件。

说明:

  1. createConfigure中只有三个配置项。

  2. initialState 是用来做服务端初次数据渲染用的。

  3. actions 所有action的集合。

  4. stores所有stores的结合。

  5. actions和stores中配置的key值基本保证是一一对应的。如下:user和post

import Rebix from 'react-rebix';
import UserActions from '../actions/UserActions';
import PostActions from '../actions/PostActions';
import UserStore from '../stores/UserStore';
import PostStore from '../stores/PostStore';

export default Rebix.createConfigure({

    initialState: null,

    actions: {
        user: UserActions,
        post: PostActions
    },

    stores: {
        user: UserStore,
        post: PostStore
    }

});

View

注意:

  1. Action中可访问Store中的getXXX方法,其他方法不能访问。

  2. View层通过Rebix.createComponent将action和store自动绑定到组建的props中。

  3. Store发生了变化,会自动update,因此强烈建议重写shouldComponentUpdate来避免重复渲染。这里跟redux是一样的。

import React, {PropTypes} from 'react';
import createRebixComponent from '../config/createRebixComponent';
import UserStore from '../stores/UserStore';
import RebixConfigure from './RebixConfigure';

class Hello extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            userInfo: {}
        };
    }

    componentDidMount() {
        var that = this;
        var {actions} = that.props;
        var mm = actions.getUserList(1234);
        var mm2 = actions.beginEditUserInfo(1234);


        actions.getPostList('absdf', 'sdf').then(function () {
            debugger;
        });

        setTimeout(function () {
            //直接访问Store中的数据
            var userInfo = UserStore.getUserInfo(121);
            that.setState({userInfo: userInfo});
        }, 2000)
    }


    render() {
        var userList = this.props.userList || [];
        var postList = this.props.postList || [];
        var userInfo = this.state.userInfo || {};

        return (
            <div>
                aaa---{userInfo.name}
                <br/>
                bbb---
                {userList.map(function (x) {
                    return <div>{x}</div>
                })}
                <hr/>
                ccc---
                {postList.map(function (x) {
                    return <div>{x}</div>
                })}
            </div>
        );

    }

}


export default Rebix.createComponent(RebixConfigure, Hello, {

    actions: {
        getUserList: 'user.getUserList',  //请参考config文件中的配置。
        getPostList: 'post.getPostList',
        beginEditUserInfo: 'user.beginEditUserInfo'
    },

    props: {
        userList: 'user.userList',
        postList: 'user.postList'
    }

});

原理

内部实现还是使用Redux,只有一个唯一的Store,通过connect自动完成对store数据变化的pub/sub机制。

License

MIT

联系我

  1. Email: master@ubibi.cn

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/12/05 11:38

React: React脚手架

一、简言 React开发目前已经非常流行,对于如何实现对React项目的管理和维护,React生态圈出现了大量可用的开发工具,例如Browserify、Gulp、Grunt、webpack等。其中,webpack称为CommonJS模块的主流工具之一,它是一个模块绑定器,拥有模块化和网络性能的两大优点,可以将不同类型的文件转换为单个文件,也可以将所有的依赖项打包成单个文件。当然,使用webpack管理React,开发者需要通过命令行去安装webpack和Babel,然后对w...

0
0
发表了博客
2020/05/09 15:07

React Native和React之间有什么区别? - What is the difference between React Native and React?

问题: I have started to learn React out of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using Google. 我已经出于好奇而开始学习React ,并想知道React和React Native之间的区别-尽管使用Google找不到满意的答案。 React and React Native seems to have the same format. React和React Native似乎具有相同的格式。 Do they have complet...

0
0
发表了博客
2018/09/17 08:16

React 与 React Native 底层共识:React 是什么

此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与机制。 目前 React 可以说是前端世界最火热的框架,具有高性能以及容易上手的特性,而且在掌握了 React 框架后,再学习其他类似 React 的框架也将变得更易上手。 关于 React 框架的高性能原因以及底层的重要概念,我们在后续的章节会陆续展开探讨,这一章节我们先来...

0
0
发表了博客
2020/07/14 15:31

React Native和React之间有什么区别? - What is the difference between React Native and React?

问题: I have started to learn React out of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using Google. 我已经出于好奇而开始学习React ,并想知道React和React Native之间的区别-尽管使用Google找不到满意的答案。 React and React Native seems to have the same format. React和React Native似乎具有相同的格式。 Do they have complet...

0
0
发表了博客
2019/05/24 18:07

React -- 脚手架书写react

一、脚手架工具 react也有很多脚手架工具,通过脚手架工具可以快速搭建一个项目应用。 官方推荐脚手架 如果你是在学习 React 或创建一个新的单页应用 Create React App 如果你是在用 Node.js 构建服务端渲染的网站 Next.js 如果你是在构建面向内容的静态网站 Gatsby 二、create-react-app 安装 npx create-react-app react-project 注意是npx,不是npm 安装创建好项目之后,切换到项目就可以运行项目了 运行 cd react-project...

0
1
发表于大前端专区
2016/09/25 22:19

react学习(1)-Why React?

react出来好久了,留意了一下突然火了半边天。在下也只能随波逐流的来学习下了,希望能通过写博客的方式让自己坚持学习下去。 React是Facebook和Instagram用来创建用户界面的JavaScript库。很多人将React认为是MVC中的V。 React的创建是为了解决一个问题:如何构建一个数据交互频繁的大型应用程序 简单 在任何时候都能很不费劲的展现数据,并且当你的数据改变时,React会自动管理UI的更新。 声明的 当数据改变时,React就好像点...

1
1
发表了博客
2019/11/26 16:35

react实战 : react 与 canvas

有一个需求是这样的。 一个组件里若干个区块。区块数量不定。 区块里面是一个正六边形组件,而这个用 SVG 和 canvas 都可以。我选择 canvas。 所以就变成了在 react 中使用 canvas 的问题。 canvas 和 SVG 有一个很大的不同。 SVG 是标签,所以HTML怎么整,SVG 就怎么整。 而 canvas 是一套相对独立的 web API,以 canvas 标签为容器(HTML接口)。 所以在 react 中处理 canvas 类似于在 react 中处理第三方DOM库。比如那些需要...

0
0
发表了博客
2019/04/10 10:10

《React基础》React-Redux

作者:水涛 追求技术,但又不失生活的乐趣,过自己想要的生活 React-Redux简介 React-Redux可以使你的React项目拥有全局数据,可以使多个React组件读取到全局数据并且组件中也可修改它。 React-Redux你可以理解为Vue中的Vuex,也是一种全局状态(不懂Vue的这条略过)。 React-Redux由store、action构建函数、reducer组成。store负责维护全局状态,action构建函数负责创建action对象,reducer处理action对象并更新store。 React-...

0
1
发表了博客
2019/08/09 11:34

react react使用css

在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router" import './App.css'; function App() { return ( <div className="App"> <div className='head'><span>app</span></div> <Router/> </div> ); } export default App; 直接在入口文件引入,我这里是app.js 引入或css文件会作用至所有的组件...

0
0
发表了博客
2019/02/15 10:15

[React] 从零开始的react

组件 1. 无状态组件 在React中,组件的名字必须用大写字母开头,而包含该组件定义的文件名也应该是大写字母(便于区分,也可以不是)。 无状态组件是纯展示组件,仅仅只是用于数据的展示,只根据传入的props来进行展示,不涉及到state状态处理,通过函数式的方式来创建一个无状态函数式组件(大多数组件都是无状态组件,通过简单的组合可以构建成其他的组件,最后合并成一个大的应用)。 无状态函数式组件是一个只带有render方法的组...

0
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
4 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部