状态管理介绍
-
为什么React要使用状态管理
- React它是一个轻量级的视图层框架,类似MVC中的V,所有的业务都集中在了V,那么V必然会很繁重
- 我们希望来一些东西来承担v中业务,所以来了状态管理
-
那么状态管理做了什么呢?
- 数据
- 处理数据的逻辑
React状态管理
三者都是架构思维,react只是它的一个组成部分
1.Flux
- 开源时间: 2013年
- Flux它是一种架构思维,和MVC是同一个级别的
- 要求:
- 了解Flux组成部分,以及每一部分的租用
- 了解Flux的工作流程
2.redux
- 开源时间: 2015年
- redux可以说是flux + 函数式编程的一个结合体
- 要求
- 熟练掌握redux的组成部分
- 熟练掌握redux的工作流程
- 可以使用redux进行项目开发
- 熟练掌握redux中间件
- 熟练掌握redux数据分片
- 了解redux中部分api的原理
3.mobx
- 它是解决redux缺点问题
- 它使用es高版本语法的一个功能: 装饰器
- 要求:
- 了解它的组成部分
- 了解它的工作流程
flux
Flux这个架构思维要想在React中使用,我们得使用一个工具,这个工具叫做:flux
1.flux组成部分
- store
- 存储管理数据
- 更新视图
- view 视图 - 使用React组件来代替
- actionCreators 动作的创建者,用于数据交互和用户交互
- 数据交互 - 和后端进行交互
- 用户交互 - 用户发起的交互动作
- dispatcher 动作的执行者,用于修改数据
2.工作流程
- 单向
- store -> react Component -> actionCreators -> dispatcher -> store
3.使用步骤(计数器案例)
- 安装flux
$ yarn add flux
- 在src/store/index.js
const events = require( 'events' )
const store = {
...events.EventEmitter.prototype,
state: {
count: 0
},
getState () {
return this.state
}
}
export default store
- 在src/components/Count.js中引入store
import React from 'react'
import store from '../store'
export default class Count extends React.Component{
constructor () {
super()
this.state = {
count: store.getState().count
}
}
render () {
const { count } = this.state
return (
<div>
<button> + 1 </button>
<p> count值为: { count } </p>
</div>
)
}
}
4.V -> actionCreators 用户发出动作 -> 在src/action/index.js
import dispatcher from '../diapatcher'
export const increment = () => {
// 动作创建
const action = {
type: 'INCREMENT'
}
// 动作要通过dispatcher才能发送
dispater.dispatch( action )
}
- 创建dispatcher src/dispatcher/index.js
import { Dispatcher } from 'flux'
const dispatcher = new Dispatcher()
import store from '../store'
dispatcher.register( action => {
switch ( action.type ) {
case 'INCREMENT':
store.state.count ++
break;
default:
break;
}
})
export default dispatcher
- 在Count.js中调用actionCreator中的方法
import React from 'react'
import store from '../store'
import { increment } from '../actions'
export default class Count extends React.Component{
constructor () {
super()
this.state = {
count: store.getState().count
}
}
add = () => {
increment()
store.emit('updateCount')
}
componentDidMount () {
store.on('updateCount',() => {
this.setState({
count: store.getState().count
})
})
}
render () {
const { count } = this.state
return (
<div>
<button onClick = { this.add }> + 1 </button>
<p> count值为: { count } </p>
</div>
)
}
}
redux
redux也是一个架构思维,它要想在项目中使用,也得用一个工具,这个工具叫redux
1.使用方式
- 数据不分块
- 数据分块
2.redux组成部分
- store
- 数据存储管理者
- View
- 视图 - 用React组件来充当
- actions
- 动作的创建者
- reducers - 是一个纯函数
- 动作执行者 - 修改数据
3.数据分块【 重点 】
-
为什么要进行数据分块?
- 一个项目中数据有
- home
- banner
- category
- mine
- …
- 为了便于管理项目中数据和逻辑
- 一个项目中数据有
-
rootReducer
- homeReducer
- countReducer
- categoryReducer
- …
redux数据分块流程
1.redux数据分块需要第三方包的支持: react-redux
yarn add redux react-redux
2.redux中间件
- redux-thunk
- redux-promise
- redux-saga
- …
mobx
1.mobx也是一个状态管理工具
2.mobx几个组成部分?每一个部分什么作用?
- actions 修改数据
- state 状态
- computed Values 计算属性
- 计算state,从新生成一个数值
- Reaction
- 更新视图