React 三端框架 IceE 快速使用

我会带着你远行 2022-08-31 04:51 134阅读 0赞

## 前言 ##

好久没有写文章了，因为最近比较忙，也没时间写开源项目，最近抽出了一点时间改善 IceE 这个项目，写一篇教程供大家使用吧  
github：https://github.com/IceEmblem/IceE

## IceE 是什么？ ##

> 本文使用的是 icetf 0.3.1 版本，不同版本代码稍有差别

大多数的企业Web站点和移动RNApp都会有相同的JS逻辑（比如下单的验证，支付的验证等），那么我们要维护2份一模一样的代码吗？IceE 就是解决这个问题，你可以将公共的JS代码分离到公共的 package 中，下面是IceE的框架结构，看了这个结构，你应该猜到 ice-core 就是那个公共的 package  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70]

## 快速开始 ##

1.  下面项目：git clone https://github.com/IceEmblem/IceE.git
2.  安装包：yarn install
3.  运行  
    Web 端：yarn start:web  
    android 端：yarn start:android  
    ios 端：yarn start:ios

## 安装一个现有的模块 ##

1.  进入 /packages/ice-react-start 目录，执行 yarn add ice-react-test 安装 ice-react-test 模块。
2.  访问 /Test 就能看到 ice-react-test 提供的页面了。

> 注：IceE  
> 的模块在框架启动时会初始化该模块，模块可以向框架注册他的功能，比如页面，主题等，你安装后访问到该模块提供的页面或主题等功能，你无需编写一行代码

## 尝试编写一个模块 ##

通过如下教程完成 mymodule 模块的编写

**1. 简单的模块**  
1）执行 node icee cw mymodule 命令，生成 mymodule 模块，生成成功后 packages 下面会多出一个文件夹，这就是我们的模块了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 1]  
2）执行 yarn install 安装依赖

3）现在我们将 Module.js 代码改为如下：  
该代码向框架注册一个页面

import React from 'react'
    import { BaseModule, PageProvider, ModuleFactory, Page} from 'icetf'
    import { Module as CoreModule} from 'ice-core';
    
    export default class Module extends BaseModule
    { 
        initialize(){ 
            // 注册页面，访问 /mymodule 将显示这个页面
            PageProvider.register(new Page("mymodule", "/mymodule", (props) => <div>Hello MyModule!!!</div>));
        }
    }
    
    ModuleFactory.register(Module, [CoreModule]);

4）执行 yarn start:web 运行站点，访问 /mymodule 页面，就可以看到我们注册的页面了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 2]

**2. 应用redux**

现在我们来应用 redux，IceE 对 redux 进行了封装，如果不清楚 redux，请查看官网文档。

1）新建一个Reduxs文件夹  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 3]  
其中包含3个文件  
Action.js: 存放我们的 action 类型和 createAction 函数，如下

// 加
    export const Add = "Add";
    export function createAdd(num) { 
        return { 
            type: Add,
            num: num
        }
    }
    
    // 减
    export const Subtract = "Subtract";
    export function createSubtract(num) { 
        return { 
            type: Subtract,
            num: num
        }
    }

Reducer.js: 存放我们的 reducer，如下

import { Add, Subtract} from './Actions'
    
    export function reducer(state = {  num: 0 }, action) 
    { 
        if(action.type == Add){ 
            return { 
                num: state.num + action.num
            }
        }
    
        if(action.type == Subtract){ 
            return { 
                num: state.num - action.num
            }
        }
    
        return state;
    }

MyRedux.js: 该类就相当与命名空间，时我们的 acion 和其他模块的 action 不冲突，其代码很简单，如下

import {  BaseIceRedux } from 'icetf';
    import {  reducer } from "./Reducer";
    
    class Redux extends BaseIceRedux { 
        reducer = reducer;
    
        constructor() { 
            // 命名，用于区分其他模块的 action
            super("My");
        }
    }
    
    export default new Redux();

2）在Module中注册我们的 reducer

import { BaseModule, ModuleFactory, IEStore} from 'icetf'
    import { Module as CoreModule} from 'ice-core';
    import MyRedux from './Reduxs/MyRedux'
    
    export default class Module extends BaseModule { 
        initialize() { 
            // 注册当前模块的 reducer
            IEStore.register(MyRedux);
        }
    }
    
    ModuleFactory.register(Module, [CoreModule]);

3）在代码中使用 redux  
现在我们编写一个页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 4]  
其代码如下：

import React from 'react'
    import MyRedux from '../Reduxs/MyRedux'
    import { createAdd, createSubtract} from '../Reduxs/Actions'
    
    class MyPage extends React.Component { 
        render() { 
            return <div>
                <div>总数：{ this.props.num}</div>
                { /* 加1按钮 */}
                <button onClick={ () => { 
                    this.props.add(1);
                }}>+1</button>
                { /* 减1按钮 */}
                <button onClick={ () => { 
                    this.props.subtract(1);
                }}>-1</button>
            </div>
        }
    }
    
    // redux 的 mapStateToProps
    // state 就是当前模块的 state
    const mapState = (state, props) => { 
        return state;
    }
    
    // redux 的 mapDispatchToProps
    const mapDispost = (dispatch, props) => { 
        return { 
            add: (num) => { 
                return dispatch(createAdd(num));
            },
            subtract: (num) => { 
                return dispatch(createSubtract(num));
            }
        }
    }
    
    // 使用 MyRedux 的 connect 生成组件
    export default MyRedux.connect(mapState, mapDispost)(MyPage)

4）在module中注册页面

import { BaseModule, ModuleFactory, IEStore, PageProvider, Page} from 'icetf'
    import { Module as CoreModule} from 'ice-core';
    import MyRedux from './Reduxs/MyRedux'
    import MyPage from './MyPage'
    
    export default class Module extends BaseModule { 
        initialize() { 
            // 注册当前模块的 reducer
            IEStore.register(MyRedux);
            // 注册页面
            PageProvider.register(new Page("MyPage", "/MyPage", MyPage));
        }
    }
    
    ModuleFactory.register(Module, [CoreModule]);

5）访问 /MyPage 就能看到我们的页面了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 5]  
**3. 注册中间件**  
现在我们注册一个打印 redux action 的中间件

1）编写代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 6]  
其代码如下：

// 注册一个 Redux 中间件
    export default (store) => (next) => (action) => { 
        console.log(action);
        return next(action)
    }

2）在module中注册中间件

import { BaseModule, ModuleFactory, IEStore, PageProvider, Page, MiddlewareFactory} from 'icetf'
    import { Module as CoreModule} from 'ice-core';
    import MyRedux from './Reduxs/MyRedux';
    import MyPage from './MyPage';
    import LogMiddlewares from './Middlewares/LogMiddlewares'
    
    export default class Module extends BaseModule { 
        initialize() { 
            // 注册当前模块的 reducer
            IEStore.register(MyRedux);
            // 注册页面
            PageProvider.register(new Page("MyPage", "/MyPage", MyPage));
            // 注册中间件
            MiddlewareFactory.register(LogMiddlewares);
        }
    }
    
    ModuleFactory.register(Module, [CoreModule]);

3）查看效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 7]

## fetch 的封装 ##

Icetf 对 fetch 进行了一个封装，其封装类为IceFetch，ice-core 的 Module 文件做了一个简单的示例

preInitialize(){ 
        // 注册 fetch 后面可以使用 IceFetch 进行网络请求
        // fetchData: fetch 请求的数据
        // 返回值: Promise<Response>
        IceFetch.registerFetch((fetchData: any) => { 
            return fetch(fetchData.url, fetchData.header)
        });
    
        // 注册一个结果处理器，使用 IceFetch 请求的结果会先通过该处理器处理
        // responst: fetch 请求结果
        // fetchData: fetch 请求的数据
        // actionType: redux 的 action 类型
        // 返回值: 处理后的数据，会作为下一个 handler 的 responst
        IceFetch.registerHandler((responst: Response, fetchData: any, actionType: string) => { 
            return responst;
        })
    }

registerFetch: 当前使用的请求函数。  
registerHandler: 请求接受后的处理器。

**IceFetch提供的网络请求函数**  
1）IceFetch.createThunkAction(fetchData: any, actionType: string)  
用于生成异步 action，fetchData 原样转给注册的 fetch 函数，在请求时 IceFetch 向 redux 分发 “IEFecth\_Request” 类型的 action，在接收后 IceFetch 向 redux 分发 actionType 类型的 action，在出错后，IceFetch 向 redux 分发 “IEFecth\_Error” 类型的 action。  
2）IceFetch.ieReduxFetch(fetchData: any)  
ieReduxFetch 是一个网络请求函数，不是一个 createAction 函数，其通过 createThunkAction 生成异步 action 并直接发生给 redux ，其使用的 actionType 类型为 “IEFecth\_Receive”

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70]: /images/20220829/f52bf8e9c74045ee900f9549790cb25a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 1]: /images/20220829/bc666eb3b293494c820a2ea75768748d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 2]: /images/20220829/d7ebb141563c46fc91ef28dbaa083f12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 3]: /images/20220829/56f1ff94c2c443cbb9cef1fa3e7e3679.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 4]: /images/20220829/b734e74da3844092ae08238ed0421271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 5]: /images/20220829/5eb14db440af4184b0055c882cdd8fcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 6]: /images/20220829/8fb3afa65470422ea569d4efa5d85d45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70 7]: /images/20220829/5075e15595ae4886a6d62b74cd69b348.png