react 状态管理

redux

一、什么时候用到redux
1、用户的使用方式复杂1
2、不同身份的用户有不同的使用方式（比如普通用户和管理员）
3.多个用户之间协作
4、与服务器大量交互
5、 view要从多个来源获取数据

二、 单一数据源
1、整个应用的state被存储在一个object tree中，并且这个object tree 只存在于唯一store中
2、state只读
唯一改变state的方法就是action，action是一个用于描述已发生事件的普通对象
3、使用纯函数来执行修改
为了描述action如何改变state tree ，你需要编写reducers

store有以下职责
维持应用的state
提供getState（）方法获取state
提供dispatch（action）方法更新state
通过subscribe（listener）注册监听器
通过subscribe（listener）返回的函数注销监听器

import { createStore } from 'redux'
const initState = {
  count: 0
}

function reducer(state = initState,action){
  switch(action.type){
    case 'cadd':
      return {
        ...state,
        count: state.count + action.count
      }
    case 'decre':
      return {
        ...state,
        count: state.count - action.count
      }
    default:
      return {
        ...state
      }
  }
}

const store = createStore(reducer);

expoort default store;


import React,{Component} from 'react';
import Store  from 'store';

class Count extends Component {
  add(){
    store.dispatch({type:'incre', count:5})
  }
  componentDidMount(){
    this.clear = store.subscribe(() => {  //store.subscribe 触发监听state的更新 // 返回一个函数 清除监听
      this.setState({})
    })
  }
  componentDidUpdate(){
    this.clear() // 清除 
  }
  render(){
    let state = store.getState;
    return (
      <div>
        <h1>{state.count}</h1>
        <button onClick={this.add.bind(this)}>incre</button>
      </div>
    )
  }
}

简单自己实现一个reducer

export function createStore(reducer){
  let state;
  let eventListeners = [] // 事件池
  function getState(){
    return state;
  }
  function dispatch(action){
    state = reducer(state,action);
    eventListeners.forEach(item => {
      item && item();
    })
  }
  function subscribe(fn){
    eventListeners.psush(fn)
    return (fn) => {
      eventListeners.filter((item) => item === fn)
    }
  }
  dispatch({}) // 初始化state的数据，通过执行reducer
  return {
    getState,
    dispatch,
    subscribe,
  } 
}

自己实现react-reducer

// 自己实现react-redux
 import React, { Component } from 'react'
 export const MyContext = React.createContext();

 export class Provider extends Component{
   render(){
     let {children, sotre } = this.props;
     return <MyContext value={store}>
      {children}
     </MyContext>
   }
 }

 export function connect(mapStateToProps, mapDispatchToProps){
  return function(comp){
    return class Temp extends Component{
      constructor(props, context){ // 此处的context 是MyContext传进来的
        super(props,context);
        this.state = mapStateToProps(context.getState())
        this.dispatch = mapDispatchToProps(context.dispatch);
      }
      static contextType = MyContext;  // 静态属性  此时本地就有this.context
      componentDidMount(){
        this.context.subscribe(() => {
          this.setState( // 更新，重新渲染
            mapStateToProps(this.context.getState())
          )
        })
      }
      render(){
        return <Comp {...this.props} {...this.state} {...this.dispatch} />
      }
    }
  }
 }

combineReducers

 function reducer1(){
   //...
 }

 function reducer2 (){
   //...
 }

 export default store = createStore(combineReducers({
   reducer1,
   reducer2
 })) 

// 实现原理
 export function combineReducers(obj) {  // 返回值是一个reducer方法
    return function(state = {},action){
      Object.keys(obj).forEach((key) => {
        state[key] = obj[key](state[key], action)
      })
      return state
    }
 }

mobox

灵活
性能 哪更新哪加载