기술나눔

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

1. MVC

UI 및 데이터 연관의 복잡성을 줄이기 위한 솔루션입니다.

프런트엔드와 백엔드가 분리되지 않았던 초기에는 서버가 페이지에 필요한 모든 데이터를 포함하여 완전한 HTML로 응답했습니다.브라우저는 페이지 렌더링만 담당하며 전체 프로세스는 다음과 같습니다.서버 측 렌더링。

서버 측 처리 흐름: 요청을 처리하고 필요한 데이터를 HTML에 포함시킨 다음 이를 브라우저에 반환합니다.

이 과정의 복잡성을 줄이기 위해 다음과 같은 방법이 있습니다. 엠비씨 모델.

• 서버는 다양한 요청을 수신하고 이를 다른 서버에 배포합니다. 씨컨트롤러(controller)는 이 요청에 필요한 데이터를 처리하고 조합합니다.
• 중odel 레이어는 UI 렌더링을 위해 데이터를 데이터 모델로 조합합니다.
• V보기 레이어는 데이터 모델을 HTML로 조합하여 브라우저에 반환합니다.

앞부분과 뒷부분이 분리되는 이유 중 일부，

MVC 패턴에서는 데이터 모델이 뷰 레이어로 조립되어 최종 HTML을 생성하는데, 이는 점점 더 복잡해지고 있습니다.
그래서 데이터를 프런트엔드에 직접 반환하고, 표시할 데이터를 조합하는 로직은 프런트엔드에 맡기고 싶습니다.

2. 프론트엔드 MVC의 어려움

프론트엔드 프레임워크 뷰、반응하다 해결됨데이터 --> 보기문제가 있지만 컨트롤러는 서버보다 훨씬 더 복잡합니다.

1. 프런트 엔드 컨트롤러는 실제로 사용자 작업을 처리하고 있으며 작업 시나리오가 복잡하고 데이터가 변경되는 상황이 너무 많습니다.

1. 구성 요소마다 작업과 응답이 다르며 각 이벤트 핸들러는 서로 다른 작업을 수행합니다.
2. 예를 들어 서버는 특정 인터페이스가 호출되는지 여부만 알면 되고 컨트롤러는 로직을 처리합니다.
프런트 엔드가 호출 인터페이스를 트리거하는 시나리오는 두 개 이상일 수 있습니다. 즉, 버튼을 클릭하여 트리거하거나, 타이머로 트리거하거나, 다른 로직이 실행된 후 트리거할 수 있습니다.

2. 프런트엔드 프레임워크는 단방향 데이터 흐름을 사용합니다. 데이터를 공유할 때 데이터는 최상위 구성 요소로만 승격되고 레이어별로 전달될 수 있으며 이는 상대적으로 번거롭습니다.

따라서 컨텍스트(React.createContext / prvide/inject ) 공유 데이터를 제공합니다. 그러나 특히 중형 및 대규모 애플리케이션의 경우 여전히 몇 가지 단점이 있습니다.

• 컨텍스트는 로컬 및 심층 계층 관계를 갖는 구성 요소 간의 통신에 더 일반적으로 사용됩니다.데이터 전송, 전달된 데이터를 변경하는 경우는 거의 없습니다.
• Vuex와 Redux는 보다 완벽한 기능을 제공하도록 설계되었습니다.현황관리솔루션에는 시간 여행(디버깅, 상태 회귀), 모듈화 등도 포함됩니다.

3，플럭스

FaceBook이 제안하는 데이터 솔루션의 가장 큰 역사적 의의는 action 개념.

• action수행할 작업을 설명하는 데 사용되는 개체입니다.데이터 변경을 트리거하는 유일한 이유입니다.。
• store 공유 데이터를 저장하는 데이터 웨어하우스(글로벌 싱글톤 모드)를 나타냅니다.따라 달라질 것이다action 창고의 데이터를 변경합니다.

// 示例
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，리덕스

존재하다 몸을 풀다 기반으로 소개된reducer, 다음에 따라 사용됨 action 데이터 처리를 위해 처리된 데이터는 창고에 다시 저장됩니다.

서버 측의 MVC 프로세스를 비교하면,action 요청을 트리거하는 것과 동일합니다.reducer 컨트롤러와 동일합니다.

vuex와의 비교:

사용이 간편함:

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

비교됨 뷰엑스：

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

---

위에.