十分钟上手前端React+MirrorX最佳实践

随着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组件的访问权。因此，需要有一个统一的地方来跨越组件的障碍，存储这些信息，把这个机制封装好了&