ReactNative学习-什么是iflux?

什么是iflux ?

iflux = immutable.js + react.js

什么是React.js ?

React.js犹如Facebook的文化基因所强调的一样move fast and break things, 在快速前进中打破了很多我们对于web开发的固有认识。
更厉害的是React把这种创新平移到移动开发(React native)实现了Learn once, Write everywhere.

React的特点。

强调组件化的开发方式（更高的抽象层次，更好的分离关注点）
声明式的开发风格（更好的表现力）
单向的数据流动（简单可预测）
超高性能的渲染60fps不是梦（掌声在哪里？）
最大的创新源于virtual dom （以及virtual native）
轻量，可以在现有的系统中快速试错
精确的生命周期，更简单的整合第三方的库(jquery)

关于更多

因为React的定位就是轻量级高效组件式的view library，但是在我们实际的应用开发工程中不仅仅需要处理view的问题，更复杂的是对于状态的控制。
官方的flux架构提供了一个很好的针对React的架构指导，但是代码量很大。
说到底flux就是在解决一个数据流向以及控制状态变化问题。这点om确实做的非常出色，
借助于Clojure的数据的特性（1. 数据不可变 2. 持久化数据结构 3.共享数据结构）在不断的追寻下，immutable.js出现在了眼前，如获至宝。
随着对immutable.js深入挖掘，发现正好契合了React的架构特点，可以使用Immutable很好的管理我们的Store，因为Immutable强调值语义，
能够更好的追踪状态的变化(cursor)且带来了更好的性能。

整体思路

建议：优先选择connectToStore

+-----------------------+
|       WebApi          |
+-----------------------+
          |  
         \|/
+-----------------------+
|   Store（immutable）   |<-----+
+-----------------------+      |
           | //es5的风格        |
           | StoreMixin        | msg(EventEmitter)
          \|/                  |
+------------------------+     |
|     React App          |-----|
+------------------------+
|      <Layout>          |
|        <SearchForm/>   |
|        <Toolbar/>      |
|        <DataGrid/>     |
|       </Layout>        |
+------------------------+

一个应用只有一个Store，单根数据源，单向数据流动，数据沉淀在顶层。
且通过PureRenderMix可以获取更好的性能。简直就是为React私人定制一般。

于是，顺其自然的写了iflux去更好的粘合React和immutable。

整体思路：

React只承担view应该承担的事情（1. 资料呈现 2. 用户交互）不处理任何的业务逻辑，就是根据数据去渲染dom即可，这样view可以做的很轻。
应用的全部数据沉淀在一个Store中，当全部数据在顶层时，很多事情都变得简单，因为获取数据变得十分廉价。无论是校验和对数据的转换控制都变得非常简单。
React只是取数据渲染，其他的比如状态的变化全部通过事件pubsub通知appstore去更新数据。如果状态不会影响其他组件的级联变化可以放在组件内部消化掉。
所有的ajax封装在webapi模块中，全部promise化。回调回来通过cursor更新store, cursor更新store， store通知React去rerender。
区分View component 和 pure component。

如何使用?


mkdir hello
cd hello
npm init
npm install react immutable iflux --save
npm install babel-loader --save-dev

➜  iflux-demo  tree -L 3
.
├── apps                #we like django's app-style
│   └── index           #app-name
│       ├── index.js    #viewcontainer component
│       ├── component   #collect of dump components
│       ├── store.js    #immutable store
│       └── webapi.js   #fetch remote resource
├── node_modules
├── package.json
└── webpack.config.js

5 directories, 4 files

例子

//webapi.js

export const fetchGithub = (name) => {
  return fetch(`http://github.com/${name}`)
};

export default {
  fetchGithub
};


//store.js
import { Store, msg } from 'iflux';
import { fromJS } from 'immutable';
import { fetchGithub } from './webapi';

const appStore = Store({
  name: '',
  githubInfo: {}
});

exports default appStore;

//when use immutable's cursor to update store
//react's view will auto re-render
msg.on('updateName', (name) => {
  appStore.cursor().set('name', name);
});

msg.on('submit', async () => {
  const data = await fetchGithub(name);
  appStore.cursor.set('githubInfo', fromJS(data));
});


//index.js

//es5的样式
import React from 'react';
import {msg, mixins} from 'iflux';
import appStore from './store';
const {StoreMixin} = mixins;


const IfluxApp = React.createClass({
  //自动将Store中的data混入到state
  mixins: [StoreMixin(appStore)],

  render() {
    var store = appStore.data();

    return (
      <div>
        <form onSubmit={this._submit}>
            <input name="name" onChange={this._handleChange}/>
        </form>
        <div>
          {store.get('githubInfo')}
        </div>
      </div>
    );
  },

  _handleChange(e) {
    msg.emit('updateName', e.target.value);
  },

  _submit() {
    msg.emit('getGithubInfo');
  }
});


//es6的样式
import React from 'react';
import { msg, connectToStore } from 'iflux';
import appStore from './store';

class IfluxApp extends React.Component {
  render() {
    const {store} = this.props;

    return (
      <div>
        <form onSubmit={this._submit}>
            <input name="name" onChange={this._handleChange}/>
        </form>
        <div>
          {store.get('githubInfo')}
        </div>
      </div>
    );
  }
}

export default connectToStore(appStore)(IfluxApp);