![18531428641859e489fc9f9d0c841682.png](https://i-blog.csdnimg.cn/blog_migrate/66130e980f9c2cfcf4c82042eb62eebf.jpeg)
![a4b42767878edd260942d63538a29160.png](https://i-blog.csdnimg.cn/blog_migrate/ed7fb6844e7d20a94975563f8b9d0b01.jpeg)
随着React的普及,很多大厂的前端必备React相关知识,甚至已有成熟框架应用在生产环境。今天我们探讨的是React进阶者经常会遇到的MirrorX编写问题,看着前人写的组件,绕着绕着就绕糊涂了。真实案例:可能为了改一个简单的传参,前端开发工程师会耗费在跟代码至少4-5个小时。因此我便做此文,用以帮助正在进阶过程中的前端工程师们快速理解一个RESTful请求是怎么经过MirrorX的处理,到达组件并激发组件重新渲染。此文大厂前端开发必备。
适合读者:具备React基础的程序员、用友UCF开发者、蚂蚁金服Antd开发者。
概念问答
1、什么是MirrorX?
MirrorX是基于Redux封装的一种状态机。比如实际使用的时候假设我们要从后台读个商品接口、把接口返回的数据做一些处理(比如打折的要前端计算折扣金额),然后将处理好的数据显示在界面上。想想就得用很多代码,而且都要放在组件的类里吧?
要是有一个框架,组件里只需要调一行代码就能解决,是不是很不错?MirrorX就是用来做这件事的。
2、怎么能做到1行解决?
学过面向对象编程的,应该都知道封装性可以使控制层代码更加简练。但是React里如果要处理刚才说的那件事,既需要state和props控制权,也要知道来来往往的上下文(比如当前用户是谁、VIP等级是多少),最令React程序员难受的是,当前用户信息在UserView组件里,当前的GoodsView组件没有对UserView组件的访问权。因此,需要有一个统一的地方来跨越组件的障碍,存储这些信息,把这个机制封装好了,就可以实现一行解决。
3、具体是怎样的机制?
网上有很多文章讲Redux,看完Redux,再搜索MirroX就可以知道具体的机制。简单的来说,就是系统有若干个状态仓库,我们可以把上下文变量都分门别类放在不同仓库里,比如用户信息、商品信息;放入的时候都是调用动作来实现,比如读取商品信息、更改商品数量。而动作可以选择是否调用服务,如果前台更改商品数量,直接改状态仓库里的数值即可,无需调用服务;如果调用了服务,则一般来说是功能是需要服务器交互的。
如何用MirrorX完成一个功能
这里举个请求后台读取商品列表的例子
1、环境准备
先确保你已经通过npm i安装了mirrorx、react、axios。因为本文是最佳实践,对于如何安装不做赘述。
2、写一个简单的服务(Service)
写一个service.js文件(注释多,代码其实没几行)
1import request from "axios";
2const URL={
3 GET_GOODS:"api/template/GetGoods" // 声明要访问的后台接口地址
4}
5// 暴露出一个名为GetGoodsApi的函数,入参params是Object类型,代表提交给后台的参数列表
6// 这个函数会返回一个Promise对象
7export const GetGoodsApi = (params) => {
8 return request(URL.GET_GOODS, {method: "post",params})
9}
10// 你还可以暴露出其他函数,一个Service可以export const多个函数
11// export const GetMember = (params) => {
12// return request(URL.GET_MEMBER, {method: "post",params})
13//}
3、写一个简单的模型层(Model,包含动作和模型)
写一个model.js(注释多,代码其实没几行)
1import { actions } from "mirrorx";
2import * as api from "./service"; // 把刚才的service.js引入进来,名称定为api
4export default {
5 name: "GoodsManager", // 这里写的名字将会成为状态仓库的名称
6 initialState: { // 这里可以写初始化时状态机里的初始状态
7 userId: "0001"
8 },
9 // reducer:状态机处理函数
10 reducers: {
11 // 这个updateState是默认的,它用来主动更新状态机里的各种状态
12 // state和data都是Object对象
13 // state是框架传入的,开发者调用的时候,data才是对应的第一个参数
14 // ...是ES6的对象扩展运算符,后面...data会自动覆盖...state的同名属性
15 updateState: (state, data) => ({ ...state, ...data })
16 // 后面还可以写其他的reducer,切记第一个参数一定是state
17 },
18 effects: {
19 // 动作处理函数:获取商品
20 // param是对象,getState是框架传入的函数对象,用来方便获取当前状态机的状态
21 // 开发者调用的时候,不用给getState形参赋值
22 async GetGoods(param, getState) {
23 // Promise的同步操作运算,获取Axios返回的data
24 let { data } = await api.GetGoodsApi(param);
25 // 调用当前状态机的updateState方法(也就是上面写的那个函数)
26 // 由调用可见,只放了一个Object类型的参数
27 actions.GoodsManager.updateState({ goods: data.data });
28 }
29 }
30};
4、改造组件,变成由MirrorX托管组件
第一步、在项目入口的地方添加(比如在app.js上添加在内存中创建状态机的代码):
1// 引入MirrorX的组件
2import mirror from 'mirrorx';
3// 引入刚刚写的model,注意路径
4import model from './model';
5// 调用MirrorX,根据模型创建状态机
6mirror.model(model);
第二步、在受状态机托管的组件上改一下代码
1// 增加对MirrorX的引用
2import {connect} from 'mirrorx';
3// 这里面GoodsView就是当前受状态机托管组件的class名称,GoodsManager就是第二步里name写的名字
4export default connect(state => state.GoodsManager)(GoodsView);
5、在需要调用的地方写下如下代码:
这里因为GoodsView只要一加载就需要显示商品列表,因此,我们可以把代码写在constructor(props)函数里:
1// 组件上需要引入MirrorX的actions
2import {actions} from 'mirrorx';
3// 在constructor(props)函数里写上以下调用即可
4actions.GoodsManager.GetGoods({
5 user:props.userId
6});
然后render里写一下从props.goods(叫做goods是因为第三步GetGoods方法调用updateState方法时传的就是goods,所以当前组件需要从props里接)渲染界面的前端代码,就可以开始测试了。
补充说明
状态机里所有的状态值都会被自动写在托管组件的props里,当发生变化时,也是可以从props里取出来,因此不要尝试去获取或更新组件的state。
只要状态机里的值变化,受到托管的组件会重新执行render方法,实现自动刷新。
实际开发时由于存在组件嵌套、组件元素属性值与状态机里的状态名称冲突,各种疑难杂症随之而来。介于我对于Antd、UCF等成熟框架的分析和实战,得出一个结论,大型系统的model.js、service.js一般不会超过5个,而且大多都有命名规范。
如果是看别人的代码,倒着按顺序找一遍即可,从此前端大神的代码不再难懂。