Diez minutos para empezar Reaccionar + MirrorX, a partir del código de front-end ya no se oscurecer el gran Dios

Autor | Yangruo Yu

Fuente | Blog CSDN, Zebian | Yugao

Figura cabeza | Descarga de pago de la China, visual

Exposición | RDCC (ID: CSDNnews)

Con la popularidad Reaccionar parte delantera Reaccionar muchos fabricantes de conocimiento esencial, e incluso tiene un marco madura para su aplicación en un entorno de producción. Hoy exploramos el problema es escribir MirrorX Reaccionar avanzada a menudo se encuentran, mirando a los componentes de nuestros predecesores escribió, alrededor de alrededor de alrededor confundido. caso real: es posible cambiar una participación masiva sencilla, los ingenieros de desarrollo de front-end gastará por lo menos 4-5 horas con el código. Así que este artículo voy a hacer para ayudar en el proceso de ser ingenieros de front-end avanzados para comprender rápidamente cómo una petición REST se procesa MirrorX del alcance e inspirar componente de ensamblaje re-representación. Este artículo fabricantes deben tener un desarrollo front-end.

Para los lectores: Reaccionar con los programadores, desarrolladores básicos de UF UCF, vestido de oro hormigas desarrolladores ANTD.

Q concepto

1. ¿Cuál es MirrorX?

máquina de estados MirrorX Redux se basa en un paquete. Por ejemplo, el uso real de los supuestos básicos que necesitamos para leer unas interfaces de las materias primas, la interfaz a los datos devueltos a hacer algo de procesamiento (por ejemplo, para calcular el importe de descuento de descuento front-end), y luego se muestran los datos procesados en la pantalla. Creo que hay que utilizar una gran cantidad de código, componentes de clase y se debe colocar en ella?

Si existe un marco, sólo se necesita ajustar los componentes en una sola línea de código puede resolver, no es muy bueno? MirrorX se utiliza para hacerlo.

2, la forma de una línea puede hacer para resolver?

Aprendido de programación orientado a objetos, encapsulación debe saber que el código puede hacerse capa de control más concisa. Pero reaccionar de si usted quiere tratar con esa cosa acaba de decir, requiere tanto control estatal y accesorios, también es necesario conocer el contexto del ir y venir (como el usuario actual que es, nivel VIP es el número), la mayor parte Reaccionar programador es incómoda los componentes UserView información del usuario actual, los componentes de la corriente GoodsView sin acceso a los componentes UserView. Por lo tanto, no es un obstáculo para un lugar unificado a través de los componentes, el almacenamiento de la información, este mecanismo un paquete bueno, se puede lograr una fila resuelto.

3. ¿Qué mecanismos específicos?

Hay muchos artículo en línea acerca de Redux, viendo Redux, a continuación, buscar MirroX puede conocer el mecanismo específico. En pocas palabras, es decir, el sistema tiene una serie de almacenes estatales, podemos poner el contexto variables se clasifican en diferentes almacenes, tales como la información del usuario, información del producto, todo el tiempo a la llamada a la acción para lograr, por ejemplo, información de productos lectura, cambiar el número de productos. La acción puede elegir si se debe llamar al servicio, si la recepción para cambiar el número de elementos, directamente cambiar el estado del valor del almacén sin necesidad de invocar el servicio; si se llama al servicio, por lo general es una función de la necesidad de la interacción del servidor.

Cómo llevar a cabo una función con MirrorX

Aquí, por ejemplo, una solicitud para leer volver al listado de productos

1, la preparación entorno

En primer lugar asegúrese de que ha instalado mirrorx por la NGP i, reaccionar, axios. Debido a que este artículo es la mejor práctica para la instalación de la revista.

2, escribe un simple servicio (Service)

Escribir un archivo service.js (comentario mucho, de hecho, no pocas líneas de código)

 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, para escribir una capa de modelo simple (el modelo, y que comprende un modelo de movimiento)

Escribir una model.js (comentario mucho, de hecho, no pocas líneas de código)

 1import { actions } from "mirrorx";
 2import * as api from "./service"; // 把刚才的service.js引入进来，名称定为api
 3
 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, el componente de transformación en la MirrorX componentes administrados

El primer paso, en la entrada de proyectos locales añadió (tales como la adición de código para crear una máquina de estado en la memoria en app.js):

1// 引入MirrorX的组件
2import mirror from 'mirrorx';
3// 引入刚刚写的model，注意路径
4import model from './model';
5// 调用MirrorX，根据模型创建状态机
6mirror.model(model);

El segundo paso, cambie el código en la máquina de estado de montaje organizada por

1// 增加对MirrorX的引用
2import {connect} from 'mirrorx';
3// 这里面GoodsView就是当前受状态机托管组件的class名称，GoodsManager就是第二步里name写的名字
4export default connect(state => state.GoodsManager)(GoodsView);

5, escribir el siguiente código en su lugar necesidad de llamada:

GoodsView aquí porque mientras la carga en una lista de productos que se mostrará, por lo que podemos escribir el código de la función constructora (apoyos) en:

1// 组件上需要引入MirrorX的actions
2import {actions} from 'mirrorx';
3// 在constructor(props)函数里写上以下调用即可
4actions.GoodsManager.GetGoods({
5    user:props.userId
6});

Entonces la hacen por escrito de props.goods (llama la mercancía debido a que el tercer método GetGoods paso llama al método UpdateState es para pasar el tiempo de las mercancías, por lo que las necesidades de componentes actuales para elegir apoyos en) interfaz de código front-end de la representación, se puede comenzar la prueba.

suplemento

La máquina de estados en todos los valores de estado son componentes escritos en los puntales en el interior, cuando se produce un cambio, también se puede sacar de los puntales de realiza de forma automática, por lo que no intente adquirir o actualizar componentes del Estado.

Siempre que el cambio en el valor de la máquina de estados, organizado por la asamblea se volverá a ejecutar el método render, actualización automática.

Debido a que hay anidada componentes, conjuntos y los valores de atributos de elementos de máquina de estado en el nombre del estado de conflicto, diversas enfermedades incurables como consecuencia de la evolución real. Entre yo para ANTD, UCF maduro y marco práctico de análisis, llegar a una conclusión, model.js sistemas grandes, generalmente no más de 5 service.js, y la mayoría de ellos tienen convenciones de nombres.

Si vistazo al código, hacia atrás con el fin de encontrar de nuevo, el código de la parte delantera del Gran Dios ya no es difícil de entender.

fuente original:

https://blog.csdn.net/yry0304/article/details/104853557

【Final】