Compartir tecnología

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1, MVC

es una solución para reducir la complejidad de la interfaz de usuario y la asociación de datos.

En los primeros días, cuando el front-end y el back-end no estaban separados, el servidor respondía con un HTML completo, incluyendo todos los datos necesarios para la página.El navegador solo desempeña la función de representar la página y el proceso general esRepresentación del lado del servidor。

El flujo de procesamiento del lado del servidor: procesa la solicitud, incrusta los datos requeridos en HTML y luego los devuelve al navegador.

Para reducir la complejidad de este proceso, existe MVC modelo.

• El servidor recibe diferentes solicitudes y las distribuye a diferentes Cresponsable (responsable) para procesar y recopilar los datos necesarios para esta solicitud.
• METROLa capa odel ensamblará los datos en un modelo de datos para la representación de la interfaz de usuario.
• VLa capa de vista ensamblará el modelo de datos en HTML y lo devolverá al navegador.

Parte de las razones de la separación del front-end y el back-end.，

En el patrón MVC, el modelo de datos se ensambla en la capa de Vista para generar el HTML final, que se vuelve cada vez más complejo.
Por lo tanto, quiero devolver los datos directamente al front-end y dejar la lógica de ensamblar los datos para mostrarlos al front-end.

2. Dificultades con MVC front-end

marco frontal Vista、Reaccionar resueltoDatos --> Verproblema, pero el controlador es mucho más complicado que el servidor.

1. El controlador de front-end en realidad está procesando las operaciones del usuario, los escenarios de operación son complejos y hay demasiadas situaciones en las que se cambian los datos.

1. Diferentes componentes tienen diferentes operaciones y respuestas, y cada controlador de eventos hace algo diferente.
2. Por ejemplo, el servidor solo necesita saber si se llama a una determinada interfaz y el controlador maneja la lógica.
Puede haber más de un escenario en el que el front-end active la interfaz de llamada: activación al hacer clic en un botón, activación mediante un temporizador o activación después de ejecutar otra lógica.

2. El marco de front-end utiliza un flujo de datos unidireccional. Al compartir datos, los datos solo se pueden promover al componente de nivel superior y pasar capa por capa, lo cual es relativamente engorroso.

Entonces el contexto (React.createContext / prvide/inject ) para proporcionar datos compartidos. Pero todavía existen algunas deficiencias, especialmente para aplicaciones medianas y grandes.

• El contexto se usa más comúnmente en la comunicación entre componentes con relaciones jerárquicas locales y profundas, y es paratransferencia de datos, es raro cambiar los datos pasados.
• Vuex y Redux están diseñados para proporcionar una solución más completa.Gestión de estadoLas soluciones también incluyen viajes en el tiempo (depuración, regresión de estado), modularización, etc.

3, Flujo

La mayor importancia histórica de la solución de datos propuesta por FaceBook es la introducción de action concepto.

• actiones un objeto utilizado para describir lo que se debe hacer,es la única razón que desencadena cambios de datos。
• store Representa un almacén de datos (modo singleton global) para almacenar datos compartidos.dependerá de diferentesaction Cambiar los datos en el almacén.

// 示例
cosnt loginAction = {
    type: "login",
    payload: {
        loginId:"admin",
        loginPwd:"123123"
    }
}

const deleteAction = {
    type: "delete",
    payload: 1  // 用户id为1
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4,Reedición

existir Doblar introducido basado enreducer, utilizado según action Para procesar los datos, el almacén volverá a guardar los datos procesados.

Comparando el proceso MVC en el lado del servidor,action Equivalente a activar una solicitud,reducer Equivalente a Controlador.

Comparación con vuex:

Fácil de usar:

import { createStore } from "redux";

function reducer(state, action) {
    console.log(action.payload);
    if (action.type === "add") {
        return state + 1;
    } else if (action.type === "minus") {
        return state - 1;
    }
    return state;
}

const store = createStore(reducer, 10);

// 分发 action
store.dispatch({ type: "add", payload: "附加的数据" });
// 获取最新的 store
console.log(store.getState());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Comparado Vuex：

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state, { amount }) {
       state.count += amount
    }
  },
  actions: {
    increment ({ commit }, payload) {
      // 触发 mutation
      commit('increment', payload)
    }
  }
})

// 分发 action
store.dispatch('increment', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'increment',
  amount: 10
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---

arriba.