十分钟上手前端react+mirrorx最佳实践.docxVIP

#十分钟上手前端React+MirrorX最佳实践随着React的普及，很多大厂的前端必 备React相关知识，其至已有成熟框架应用在生产环境。今天我们探讨的是React 进阶者经常会遇到的MirrorX编写问题，看着前人写的组件，绕着绕着就绕糊涂了。 真实案例：可能为了改一个简单的传参，前端开发工程师会耗费在跟代码至少4?5 个小时。因此我便做此文，用以帮助正在进阶过程中的前端工程师们快速理解一个 RESTfUl请求是怎么经过MiirorX的处理，到达组件并激发组件重新渲染。此文大 厂前端开发必备。 适合读者：具备React基础的程序员、用友UCF开发者、蚂蚁金服Antd开发者。 一、 概念问答 1、 什么是 MirrorX? MirrorX是基于Redux封装的一种状态机。比如实际使用的时候假设我们要从后 台读个商品接口、把接口返回的数据做一些处理（比如打折的要前端计算折扣金 额）,然后将处理好的数据显示在界面上。想想就得用很多代码，而且都要放在组 件的类里吧？要是有一个框架，组件里只需要调一行代码就能解决，是不是很不 错？ MirrorX就是用来做这件事的。 2、 怎么能做到1行解决？ 学过面向对象编程的，应该都知道封装性可以使控制层代码更加简练。但是React 里如果要处理刚才说的那件事，既需要state和props控制权，也要知道来来往往 的上下文（比如当前用户是谁、VIP等级是多少），最令React程序员难受的是， X前用户信息在UserView组件里，当前的GoodsView组件没有对UserView组件 的访问权。因此，需要有一个统一的地方来跨越组件的障碍，存储这些信息，把这 个机制封装好了，就可以实现一行解决。 3、 具体是怎样的机制？ 网上有很多文章讲Redux,看完Redux,再搜索MirroX就可以知道具体的机制。 简单的来说，就是系统有若干个状态仓库，我们可以把上下文变量都分门别类放 在不同仓库里，比如用户信息、商品信息；放入的时候都是调用动作来实现，比 如读取商品信息、更改商品数量。而动作可以选择是否调用服务，如果前台更改 商品数量，直接改状态仓库里的数值即可，无需调用服务；如果调用了服务，则一 般来说是功能是需要服务器交互的。 二、 如何用MirrorX完成一个功能 这里举个请求后台读取商品列表的例子 1、环境准备 先确保你已经通过npm i安装了 mirrorx react、axios=因为本文是最佳实践，对 于如何安装不做赘述。 2、 写一个简单的服务(Service) 写一个service.js文件(注释多，代码其实没儿行) import request from axios; const URL={!-- GET_GOODS:,,api/template/GetGoods // 声明耍访问的后台接口地址 } //暴露出一个名为GetGoodsApi的函数，入参params是Object类型，代表提交给后 台的参数列表 //这个函数会返回一个Promise对象 export const GetGoodsApi = (params)二gt; {!-- return request (URL. GET^GOODS^ { ! -- 一〉method: post., params}) } _ //你还可以暴露出其他函数，一个Service可以export const多个函数 // export const GetMember = (params)二gt; {!?? // return request(URL.GET^MEMBER^ {method: post^params}) //} _ 3、 写一个简单的模型层(Model,包含动作和模型) 写一个model.js (注释多，代码其实没儿行) import {!??actions } from mirrorx; import * as api from /service; // 把刚才的 service.js 引入进來，名称定 为api export default {! ■- name: ,,GoodsManager,\ //这里写的名字将会成为状态仓库的名称 initialstate: {! //这里可以写初始化时状态机里的初始状态 userid: H0001 // reducer：状态机处理函数 reducers: { !-- //这个updateState是默认的，它用來主动更新状态机里的各种状态 // state 和 data 都是 Object 对象 // state是框架传入的，开发者调用的时候，data才是对应的第一个参数 // ?…是ES6的对象扩展运算符，后面...data会自动覆盖...state的同名 属性 updateS