Condivisione della tecnologia

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

1, MVC

è una soluzione per ridurre la complessità dell'interfaccia utente e dell'associazione dei dati.

Agli albori, quando il front-end e il back-end non erano separati, il server rispondeva con un codice HTML completo, inclusi tutti i dati necessari per la pagina.Il browser è responsabile solo del rendering della pagina e l'intero processo lo èRendering lato server。

Il flusso di elaborazione lato server: elabora la richiesta, incorpora i dati richiesti in HTML e quindi li restituisce al browser.

Per ridurre la complessità di questo processo, c'è MVC modello.

• Il server riceve richieste diverse e le distribuisce a diversi Cresponsabile del trattamento (responsabile del trattamento) per trattare e raccogliere i dati necessari per tale richiesta.
• MIl livello odel assemblerà i dati in un modello di dati per il rendering dell'interfaccia utente.
• EIl livello di visualizzazione assemblerà il modello di dati in HTML e lo restituirà al browser.

Parte delle ragioni per la separazione delle estremità anteriore e posteriore，

Nel pattern MVC, il modello dati viene assemblato nel livello View per generare l'HTML finale, che sta diventando sempre più complesso.
Quindi voglio restituire direttamente i dati al front-end e lasciare la logica di assemblaggio dei dati per la visualizzazione al front-end.

2. Difficoltà con MVC front-end

quadro front-end Vista、Reagire risoltoDati --> Visualizzaproblema, ma il Controller è molto più complicato del server.

1. Il controller front-end sta effettivamente elaborando le operazioni dell'utente e gli scenari operativi sono complessi e ci sono troppe situazioni in cui i dati vengono modificati.

1. Componenti diversi hanno operazioni e risposte diverse e ogni gestore di eventi fa qualcosa di diverso.
2. Ad esempio, il server deve solo sapere se viene richiamata una determinata interfaccia e il controller gestisce la logica.
Potrebbe esserci più di uno scenario in cui il front-end attiva l'interfaccia di chiamata: attivazione facendo clic su un pulsante, attivazione tramite timer o attivazione dopo l'esecuzione di un'altra logica.

2. Il framework front-end utilizza un flusso di dati unidirezionale. Quando si condividono i dati, i dati possono essere promossi solo al componente di livello superiore e passati livello per livello, il che è relativamente complicato.

Quindi il contesto (React.createContext / prvide/inject ) per fornire dati condivisi. Ma ci sono ancora alcune carenze, soprattutto per le applicazioni di medie e grandi dimensioni.

• Il contesto è più comunemente utilizzato nella comunicazione tra componenti con relazioni gerarchiche locali e profonde ed è pertrasferimento dati, è raro modificare i dati trasmessi.
• Vuex e Redux sono progettati per fornire un'esperienza più completaGestione dello statoLe soluzioni includono anche il viaggio nel tempo (debug, regressione dello stato), modularizzazione, ecc.

3, Flusso

Il più grande significato storico della soluzione dati proposta da FaceBook è l'introduzione di action concetto.

• actionè un oggetto usato per descrivere cosa deve essere fatto,è l'unico motivo che attiva le modifiche dei dati。
• store Rappresenta un data warehouse (modalità singleton globale) per archiviare dati condivisi.dipenderà da diversiaction Modificare i dati nel magazzino.

// 示例
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,Riduzione

esistere Flettere introdotto in base areducer, utilizzato secondo action Per elaborare i dati, i dati elaborati verranno nuovamente salvati dal magazzino.

Confrontando il processo MVC sul lato server,action Equivalente all'attivazione di una richiesta,reducer Equivalente al controller.

Confronto con vuex:

Semplice da usare:

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

Rispetto 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

---

Sopra.