摘要:传统框架的缺陷传统框架的缺陷模型视图控制器的缩写即视图用户看到并与之交互的界面。即模型是管理数据很多业务逻辑都在模型中完成。在的三个部件中,模型拥有最多的处理任务。所有的状态,保存在一个对象里面唯一数据源。
模型(model)-视图(view)-控制器(controller)的缩写
V
即View视图:用户看到并与之交互的界面。
M
即Model模型是管理数据:很多业务逻辑都在模型中完成。在MVC的三个部件中,模型拥有最多的处理任务。
C
即Controller控制器:接受用户的输入并调用模型和视图去完成用户的需求,控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求,然后再确定用哪个视图来显示返回的数据。
缺点
MVC框架的数据流很理想,请求先到Controller, 由Controller调用Model中的数据交给View进行渲染.
但是在实际的项目中,又是允许Model和View直接通信的。
在2013年,Facebook让React
亮相的同时推出了Flux框架,React
的初衷实际上是用来替代jQuery
的,Flux
实际上就可以用来替代Backbone.js
,Ember.js
等一系列MVC
架构的前端JS框架。
其实Flux
在React
里的应用就类似于Vue
中的Vuex
的作用,但是在Vue
中,Vue
是完整的mvvm
框架,而Vuex
只是一个全局的插件。
React
只是一个MVC中的V(视图层),只管页面中的渲染,一旦有数据管理的时候,React
本身的能力就不足以支撑复杂组件结构的项目,在传统的MVC
中,就需要用到Model和Controller。Facebook对于当时世面上的MVC
框架并不满意,于是就有了Flux
, 但Flux
并不是一个MVC
框架,他是一种新的思想
Flux的流程:
注意:flux、redux都不是必须和react搭配使用的,因为flux和redux是完整的架构,在学习react的时候,只是将react的组件作为redux中的视图层去使用了。
React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。
有两个方面,它没涉及:
2013年 Facebook 提出了 Flux 架构的思想,引发了很多的实现。2015年,Redux 出现,将 Flux 与函数式编程结合一起,很短时间内就成为了最热门的前端架构。
不需要redux情况
需要redux情况
从组件层面考虑,什么样子的需要Redux:
Redux的设计思想:
Redux的使用的三大原则:
Reducer必须是一个纯函数
纯函数遵守以下一些约束。
步骤1:创建统一数据源
//引入创建仓库方法import {createStore} from "redux"//默认数据源数据,不能直接修改const defaultStore={ count:1}//reducer出函数 function reducers(state=defaultStore,action){ if(action.type=="incr"){ return{ count:state.count+1 } } return state}//创建唯一仓库const store = createStore( reducers,)export default store
步骤2:组件中获取数据并设置数据
import React,{Component} from "react"import store from "./store"export default class App extends Component{ constructor(props){ super(props) this.state = store.getState() store.subscribe(()=>{ this.setState(state=>store.getState()) }) } render(){ return( ) } incr=()=>{ const actionCreator=>{ type:"incr", payLoad:1 } store.dispatch(actionCreator) }}
划分reducer
原因:一个应用只有一个state,单个reducer对数据操作很臃肿,so需要按照不同功能去拆分
注意:
- 分离reducer的时候,每一个reducer维护的状态都应该不同
- 通过store.getState获取到的数据也是会按照reducers去划分的
- 划分多个reducer的时候,默认状态只能创建在reducer中,因为划分reducer的目的,就是为了让每一个reducer都去独立管理一部分状态
React-Redux是Redux的官方针对React开发的扩展库。
你可以理解为react-redux就是redux给我们提供一些高阶组件
安装
npm i -S redux react-redux
两个核心的api
语法格式为:
connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(component)
一般来说只会用到前面两个,它的作用是:
store.getState()
转化为展示组件的props
actionCreators
转化为展示组件props
上的方法使用
步骤1:定义Provider
import React from "react"import ReactDOM from "react-dom"import { Provider } from "react-redux"import store from "./store"import App from "./App"ReactDOM.render( ,document.getElementById("root"))
步骤2:子程序中使用connect
store.getState()
转化为展示组件的props
actionCreators
转化为展示组件props
上的方法传统使用方式
import React ,{Component} from "react"import {connect} from "react-redux"import * as actions frm "./countAction"class App exteds Component{ render(){ return ( {this.props.count} ) } incr=()=>{ this.props.incr() }}const mapStateProps=state=>{ return {count:state.count}}const mapPropsToDIspatch=dispatch=>{ return{ incr(){ dispatch(actions.incr()) } }}export default connect(mapStateProps,mapPropsToDIspatch)(App)
装饰器使用方式(推荐使用)
import React ,{Component} from "react"import {connect} from "react-redux"import * as actions frm "./countAction"const mapStateProps=state=>{ return {count:state.count}}const mapPropsToDIspatch=dispatch=>{ return{ incr(){ dispatch(actions.incr()) } }}@connect(mapStateProps,mapPropsToDIspatch)class App exteds Component{ render(){ return ( {this.props.count} ) } incr=()=>{ this.props.incr() }}
通常情况下,action只是一个对象,不能包含异步操作,这导致了很多创建action的逻辑只能写在组件中,代码量较多也不便于复用,同时对该部分代码测试的时候也比较困难.
常见的异步库:
基于Promise的异步库:
安装
npm i -S redux-thunk
使用
在createStore实例store中使用
import {createStore, applyMiddleware} from "redux"import thunk from "redux-thunk"import reducer from "./countReducer"const store = createStore( reducer, applyMiddleware(thunk))export default store
countReducer.js
const incrAction = num=>({ type:"incr", payload:num})export const incr=>90=>dispatch=>{ setTimeout(()=>{ let num=10 dispatch(incrAction(num)) },1000)}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/123996.html
摘要:我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的,因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式,但对于大部分开发者来说是新奇的。规模持续增长的应 原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用...
摘要:想学习下全家桶中的,刚好看到了阮一峰老师的入门文章,受益匪浅。官方的解释是是容器,提供可预测化的状态管理。和,寓意为派遣。这是发出的唯一方法。另外方法会返回一个函数,我们如果要解除监听,就可以调用这个函数。 背景 我:您好!我对此职位感兴趣,可以聊聊吗? 招聘者:您好!感谢关注。方便发一份您的简历吗? 几分钟后。。。 招聘者:请过用过react吗? 我:只看过一些项目,...
摘要:但这样做的缺点很多,不利于状态在组件之间共享。所以本篇使用作为状态管理器来实现时间旅行。并且从中可以看出过程不仅仅向对象中添加一个状态对象,还对进行了加一操作,这是为了保证状态与保持同步。 距离上一次更新已经有半个月了,这半个月来主要在忙两件事:一个是最近老板给了个自动化测试任务,另一个是和学校的弟弟一起搞一个微信小游戏...emmmm!其实主要是懒!!! 本篇是作为上篇的续集,不知道...
摘要:前端每周清单半年盘点之与篇前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日,宣布将的构建工具由迁移到,引发了很多开发者的讨论。 前端每周清单半年盘点之 React 与 ReactNative 篇 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为...
阅读 4021·2021-11-22 13:53
阅读 3619·2021-11-19 11:29
阅读 1265·2021-09-08 09:35
阅读 3166·2020-12-03 17:26
阅读 514·2019-08-29 16:06
阅读 2107·2019-08-26 13:50
阅读 1182·2019-08-23 18:32
阅读 2154·2019-08-23 18:12