作者 | 杨若瑜
来源 | CSDN博客，责编 | 夕颜
头图 | 付费下载自视觉中国
出品 | CSDN（ID:CSDNnews）
随着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文件（注释多，代码其实没几行）
3、写一个简单的模型层（Model，包含动作和模型）
写一个model.js（注释多，代码其实没几行）
4、改造组件，变成由MirrorX托管组件
第一步、在项目入口的地方添加（比如在app.js上添加在内存中创建状态机的代码）：
第二步、在受状态机托管的组件上改一下代码
5、在需要调用的地方写下如下代码：
这里因为GoodsView只要一加载就需要显示商品列表，因此，我们可以把代码写在constructor(props)函数里：
然后render里写一下从props.goods（叫做goods是因为第三步GetGoods方法调用updateState方法时传的就是goods，所以当前组件需要从props里接）渲染界面的前端代码，就可以开始测试了。
补充说明
状态机里所有的状态值都会被自动写在托管组件的props里，当发生变化时，也是可以从props里取出来，因此不要尝试去获取或更新组件的state。
只要状态机里的值变化，受到托管的组件会重新执行render方法，实现自动刷新。
实际开发时由于存在组件嵌套、组件元素属性值与状态机里的状态名称冲突，各种疑难杂症随之而来。介于我对于Antd、UCF等成熟框架的分析和实战，得出一个结论，大型系统的model.js、service.js一般不会超过5个，而且大多都有命名规范。
如果是看别人的代码，倒着按顺序找一遍即可，从此前端大神的代码不再难懂。
原文链接：
https://blog.csdn.net/yry0304/article/details/104853557
