Compartilhamento de tecnologia

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

1,MVC

é uma solução para reduzir a complexidade da interface do usuário e da associação de dados.

Antigamente, quando o front-end e o back-end não eram separados, o servidor respondia com um HTML completo, incluindo todos os dados necessários para a página.O navegador é responsável apenas por renderizar a página, e o processo geral éRenderização do lado do servidor。

O fluxo de processamento do lado do servidor: processa a solicitação, incorpora os dados necessários em HTML e os retorna ao navegador.

Para reduzir a complexidade deste processo, há MVC modelo.

• O servidor recebe diferentes solicitações e as distribui para diferentes Ccontrolador (controlador) para processar e montar os dados necessários para esta solicitação.
• MA camada odel reunirá os dados em um modelo de dados para renderização da IU.
• VA camada iew montará o modelo de dados em HTML e o retornará ao navegador.

Parte das razões para a separação entre front e back-ends，

No padrão MVC, o modelo de dados é montado na camada View para gerar o HTML final, que está se tornando cada vez mais complexo.
Portanto, quero retornar os dados diretamente para o front-end e deixar a lógica de montagem dos dados para exibição para o front-end.

2. Dificuldades com MVC front-end

estrutura de front-end Vista、Reagir resolvidoDados --> Visualizarproblema, mas o Controlador é muito mais complicado que o servidor.

1. O controlador front-end está realmente processando as operações do usuário, os cenários de operação são complexos e há muitas situações em que os dados são alterados.

1. Componentes diferentes têm operações e respostas diferentes, e cada manipulador de eventos faz algo diferente.
2. Por exemplo, o servidor só precisa saber se uma determinada interface é chamada e o controlador cuida da lógica.
Pode haver mais de um cenário em que o front-end aciona a interface de chamada: acionamento clicando em um botão, acionamento por um temporizador ou acionamento após outra lógica ser executada.

2. A estrutura front-end usa um fluxo de dados unidirecional. Ao compartilhar dados, os dados só podem ser promovidos para o componente de nível superior e passados ​​camada por camada, o que é relativamente complicado.

Então o contexto (React.createContext / prvide/inject ) para fornecer dados compartilhados. Mas ainda existem algumas deficiências, especialmente para aplicações de médio e grande porte.

• O contexto é mais comumente usado na comunicação entre componentes com relacionamentos hierárquicos locais e profundos, e é paratransferência de dados, é raro alterar os dados passados.
• Vuex e Redux são projetados para fornecer uma experiência mais completaGerenciamento de statusAs soluções também incluem viagem no tempo (depuração, regressão de estado), modularização, etc.

3，Flux

O maior significado histórico da solução de dados proposta pelo Facebook é a introdução de action conceito.

• actioné um objeto usado para descrever o que deve ser feito,é o único motivo que desencadeia alterações de dados。
• store Representa um data warehouse (modo singleton global) para armazenar dados compartilhados.dependerá de diferentesaction Altere os dados no armazém.

// 示例
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，Reduções

existir Flex introduzido com base emreducer, usado de acordo com action Para processar os dados, os dados processados ​​serão salvos novamente pelo warehouse.

Comparando o processo MVC no lado do servidor,action Equivalente a acionar uma solicitação,reducer Equivalente ao Controlador.

Comparação com vuex:

Simples 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

---

acima.