React状态管理-flux/redux/mobx

状态管理介绍

1. 为什么React要使用状态管理

   • React它是一个轻量级的视图层框架，类似MVC中的V,所有的业务都集中在了V,那么V必然会很繁重
   • 我们希望来一些东西来承担v中业务，所以来了状态管理

2. 那么状态管理做了什么呢？

   • 数据
   • 处理数据的逻辑

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.使用步骤(计数器案例)

1. 安装flux
   $ yarn add flux
2. 在src/store/index.js

 const events = require( 'events' )
        const store = {
     
          ...events.EventEmitter.prototype,
          state: {
     
            count: 0
          },
          getState () {
     
            return this.state 
          }
        }
        export default store 

3. 在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 )
        }

5. 创建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

6. 在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
  • 更新视图