一个网站做各种好玩的实验,石家庄 网站开发,水墨网站设计欣赏,Wordpress 点击量 插件目录 1#xff0c;MVC2#xff0c;前端MVC的困难3#xff0c;Flux4#xff0c;Redux 1#xff0c;MVC 是一个解决方案#xff0c;用于降低 UI 和数据关联的复杂度。 在早期前后端未做分离时#xff0c;服务端会响应一个完整的HTML#xff0c;包含页面需要的所有数据。而… 目录 1MVC2前端MVC的困难3Flux4Redux 1MVC 是一个解决方案用于降低 UI 和数据关联的复杂度。 在早期前后端未做分离时服务端会响应一个完整的HTML包含页面需要的所有数据。而浏览器仅承担渲染页面的作用整体流程也就是服务端渲染。
其中服务端的处理流程处理请求并将需要的数据嵌入到 HTML再返回给浏览器。
为了降低这个过程的复杂度出现了 MVC 模式。
服务端收到不同的请求分发给不同的 Controller控制器来处理并组装这次请求需要的数据。Model 层会将数据组装为用于UI渲染的数据模型。View 层会将数据模型组装到 HTML 中返回给浏览器。
前后端分离的部分原因
MVC 模式中将数据模型为组装到 View 视图层生成最终的 HTML这一步越来越复杂了。 所以想直接给前端返回数据组装数据进行展示的逻辑交给前端来做。
2前端MVC的困难
前端框架 Vue、React 解决了数据 -- 视图的问题但 Controller 比服务端复杂的多。
1前端的 Controller 实际上是在处理用户的操作而操作场景是复杂的改变数据的情况太多了。 1不同的组件有不同的操作和响应每一个事件处理程序做的事情也都不一样。 2比如服务器只需要知道是否调用了某个接口并控制器来处理逻辑。 而前端触发调用接口的场景可能不止一个点击按钮触发计时器触发或其他逻辑执行完后再触发。 2前端框架使用的是单向数据流在共享数据时只能将数据提升到顶层组件并逐层传递比较繁琐。
所以产生了上下文React.createContext / prvide/inject来提供共享数据。但还是有一些缺陷尤其对中大型应用来说。
上下文更多应用在局部的、层级关系较深的组件间通信并且是为了数据传递很少有更改传递数据的情况。Vuex、Redux 是为了提供了更完整的状态管理解决方案也包括时间旅行调试状态回溯、模块化等。
3Flux
FaceBook 提出的数据解决方案最大的历史意义是引入了 action 概念。
action是一个对象用于描述要做的事情是触发数据变化的唯一原因。store 表示数据仓库全局单例模式存储共享数据。会根据不同的 action 更改仓库的中的数据。
// 示例
cosnt loginAction {type: login,payload: {loginId:admin,loginPwd:123123}
}const deleteAction {type: delete,payload: 1 // 用户id为1
}4Redux
在 Flex 基础上引入了 reducer用于根据 action 来处理数据处理后的数据会被仓库重新保存。 对比服务端的 MVC 流程action 相当于触发请求reducer 相当于 Controller。 和 vuex 的对比
ReduxVuexStoreStoreReducerMutationActionAction
简单使用
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
const store createStore({state: {count: 0},mutations: {increment (state, { amount }) {state.count amount}},actions: {increment ({ commit }, payload) {// 触发 mutationcommit(increment, payload)}}
})// 分发 action
store.dispatch(increment, {amount: 10
})// 以对象形式分发
store.dispatch({type: increment,amount: 10
})以上。
