React@16.x(52)Redux@4.x(1)- 核心概念

目录

1,MVC

是一个解决方案,用于降低 UI 和数据关联的复杂度。

在早期前后端未做分离时,服务端会响应一个完整的HTML,包含页面需要的所有数据。而浏览器仅承担渲染页面的作用,整体流程也就是服务端渲染

其中服务端的处理流程:处理请求,并将需要的数据嵌入到 HTML,再返回给浏览器。

为了降低这个过程的复杂度,出现了 MVC 模式。

  • 服务端收到不同的请求,分发给不同的 Controller(控制器)来处理,并组装这次请求需要的数据。
  • Model 层会将数据组装为,用于UI渲染的数据模型。
  • View 层会将数据模型组装到 HTML 中,返回给浏览器。

前后端分离的部分原因

MVC 模式中,将数据模型为组装到 View 视图层生成最终的 HTML,这一步越来越复杂了。

所以想直接给前端返回数据,组装数据进行展示的逻辑,交给前端来做。

2,前端MVC的困难

前端框架 VueReact 解决了数据 --> 视图的问题,但 Controller 比服务端复杂的多。

1,前端的 Controller 实际上是在处理用户的操作,而操作场景是复杂的,改变数据的情况太多了。

1,不同的组件有不同的操作和响应,每一个事件处理程序做的事情也都不一样。

2,比如,服务器只需要知道是否调用了某个接口,并控制器来处理逻辑。

而前端触发调用接口的场景可能不止一个:点击按钮触发,计时器触发,或其他逻辑执行完后再触发。

2,前端框架使用的是单向数据流,在共享数据时,只能将数据提升到顶层组件,并逐层传递,比较繁琐。

所以产生了上下文(React.createContext / prvide/inject)来提供共享数据。但还是有一些缺陷,尤其对中大型应用来说。

  • 上下文更多应用在局部的、层级关系较深的组件间通信,并且是为了数据传递,很少有更改传递数据的情况。
  • Vuex、Redux 是为了提供了更完整的状态管理解决方案,也包括时间旅行(调试,状态回溯)、模块化等。

3,Flux

FaceBook 提出的数据解决方案,最大的历史意义是引入了 action 概念。

  • action是一个对象,用于描述要做的事情,是触发数据变化的唯一原因
  • store 表示数据仓库(全局单例模式),存储共享数据。会根据不同的 action 更改仓库的中的数据。
js 复制代码
// 示例
cosnt loginAction = {
    type: "login",
    payload: {
        loginId:"admin",
        loginPwd:"123123"
    }
}

const deleteAction = {
    type: "delete",
    payload: 1  // 用户id为1
}

4,Redux

Flex 基础上引入了 reducer,用于根据 action 来处理数据,处理后的数据会被仓库重新保存。

对比服务端的 MVC 流程,action 相当于触发请求,reducer 相当于 Controller。

和 vuex 的对比:

Redux Vuex
Store Store
Reducer Mutation
Action Action

简单使用:

js 复制代码
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());

对比 Vuex

js 复制代码
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
})

以上。

相关推荐
半开半落几秒前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
理想不理想v28 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我29 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记42 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜43 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=43 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck1 小时前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui