状态管理

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

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

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

   • 数据
   • 处理数据的逻辑

React状态管理

三者都是架构思维，react只是它的一个组成部分

1. Flux

   • 开源时间： 2013年
   • Flux它是一种架构思维，和MVC是同一个级别的
   • 要求：
     • 了解并会使用Flux实现计数案例
     • 了解Flux组成部分，以及每一部分的租用
     • 了解Flux的工作流程
   • 说明：
     • 大家现在不使用了

2. redux

   • 开源时间： 2015年
   • redux可以说是flux + 函数式编程的一个结合体
   • 说明
     • 市场上用的就是redux
   • 要求
     • 熟练掌握redux的组成部分
     • 熟练掌握redux的工作流程
     • 可以使用redux进行项目开发
     • 熟练掌握redux中间件
     • 熟练掌握redux数据分片
     • 了解redux中部分api的原理

3. mobx

   • 它是解决redux缺点问题
   • 它使用es高版本语法的一个功能： 装饰器
   • 要求：
     • 了解它的组成部分
     • 了解它的工作流程
     • 可以使用mobx实现计数或是todolist案例

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 - 是一个纯函数
     • 动作执行者 - 修改数据