状态管理
-
为什么React要使用状态管理
- React它是一个轻量级的视图层框架,类似MVC中的V,所有的业务都集中在了V,那么v必然会很繁重
- 我们希望来一些东西来承担v中业务,所以来了状态管理
-
那么状态管理做了什么呢?
- 数据
- 处理数据的逻辑
React状态管理
三者都是架构思维,react只是它的一个组成部分
-
Flux
- 开源时间: 2013年
- Flux它是一种架构思维,和MVC是同一个级别的
- 要求:
- 了解并会使用Flux实现计数案例
- 了解Flux组成部分,以及每一部分的租用
- 了解Flux的工作流程
- 说明:
- 大家现在不使用了
-
redux
- 开源时间: 2015年
- redux可以说是flux + 函数式编程的一个结合体
- 说明
- 市场上用的就是redux
- 要求
- 熟练掌握redux的组成部分
- 熟练掌握redux的工作流程
- 可以使用redux进行项目开发
- 熟练掌握redux中间件
- 熟练掌握redux数据分片
- 了解redux中部分api的原理
-
mobx
- 它是解决redux缺点问题
- 它使用es高版本语法的一个功能: 装饰器
- 要求:
- 了解它的组成部分
- 了解它的工作流程
- 可以使用mobx实现计数或是todolist案例
flux
Flux这个架构思维要想在React中使用,我们得使用一个工具,这个工具叫做:flux
-
flux组成部分
- store
- 存储管理数据
- 更新视图
- view 视图 - 使用React组件来代替
- actionCreators 动作的创兼职,用于数据交互和用户交互
- 数据交互 - 和后端进行交互
- 用户交互 - 用户发起的交互动作
- dispatcher 动作的执行者,用于修改数据
- store
-
工作流程
- 单向
- store -> react Component -> actionCreators -> dispatcher -> store
-
使用步骤
- 安装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> ) } }
- 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
-
使用方式
- 数据不分块
- 数据分块
-
redux组成部分
- store
- 数据存储管理者
- View
- 视图 - 用React组件来充当
- actions
- 动作的创建者
- reducers - 是一个纯函数
- 动作执行者 - 修改数据
- store