状态管理使用样例

什么是状态管理

在react中,我们可以用过props完成一些特定场景下的状态共享,比如父子组件。但是当遇到一些其他场景时,状态共享显得特别繁琐,比如常见的跨级组件,同级组件等。虽然react提供了context API 来试图解决这方面的问题,但是还是不够优雅。现在市面上有很多优秀的状态管理库,我们一起分析看看那个更适合我们。

Redux

特点:

    • 三大原则:单向数据流,state只读,只能通过reduce修改,reducer必须是一个纯函数。
    • 由store,reducer,action三部分组成。store用于存放数据,reducer是触发action之后调用的更新方法更新store,action用于调用reducer。
    • redux是js的状态管理库,在react更好的使用需要搭配react-redux。
    • 不支持异步处理。需要使用三方异步中间件 。(redux-thunk,redux-saga)
    • 有一定的上手成本,需要按照规范定义模版结构,也因此是大型项目状态管理的首选方案。
// main.js
import store from './store';  
import { Provider } from 'react-redux';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  
      
        
          
            
          
        
      
  
);

// store.js
import { applyMiddleware, legacy_createStore as createStore, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
export default store;


// reducer.js

import { combineReducers } from "redux";

import { reducer as IndexReducer } from '@/pages/index/store';

export default combineReducers({
  Index: IndexReducer,
})

Mobx

特点:

    • 响应式数据流,监听数据变化暴漏给所有依赖的观察者组件。
    • 上手相对于redux简单,自由化相对较高。(适合中小型项目,不适合多人开发)
    • 支持异步。
// store.js
import { action, observable, makeObservable } from 'mobx';

class Store {
  constructor() {
    makeObservable(this, {
      count: observable,
      list: observable,
      setCount: action,
      setList: action
    })
  }
  count = 1;
  list = {};
  setCount() { this.count++ };
  setList(data) { this.list = data };
}


export const store = new Store();

// demo.js 
import { useObserver, useLocalStore } from 'mobx-react';
import { store } from './store';
const Demo1 = () => {
  const localStore = useLocalStore(() => store);
  const addCount = () => {
    localStore.setCount()
  }
  const changeList = () => {
    localStore.setList({ name: 'kobe' })
  }
  return useObserver(() =>
    

count:{localStore.count}

list:{localStore.list.name}

) } export default Demo1;

Recoil

特点:

    • 与redux相似,在根组件用过RecoilRoot包裹,通过context传递上下文。
    • 使用atom(无依赖),selector(有依赖)创建数据。
    • 上手简单,没有那么多条条框框,直接简单粗暴的定义,修改即可完成使用。
import { atom, selector } from 'recoil';

export const countState = atom({
  key: 'countState',
  default: 0
})

export const dataListState = atom({
  key: 'dataListState',
  default: {}
})

export const dataState = selector({
  key: 'dataState',
  get: ({ get }) => {
    const count = get(countState);
    const dataList = get(dataListState);
    return {
      count,
      dataList
    }
  }
})

//  消费 
import { useRecoilState, useSetRecoilState,useRecoilValue,useResetRecoilState } from 'recoil';

const [count, setCount] = useRecoilState(countState); // 与useState类似,提供读写方法
const setDataList = useSetRecoilState(dataListState); // 仅修改
const { count, dataList } = useRecoilValue(dataState);// 只读
const reset = useResetRecoilState(dataState);// 重置

Zustand

特点:

    • 通过create创建数据,在回调方法中暴漏set,get等api用于读写当前数据。
    • 上手简单,写法上与Recoil类似。
    • 支持异步。
// store.js
import create from "zustand";

const useStore = create((set) => ({
  votes: 0,
  list: {},
  addVotes: () => set(state => ({ votes: state.votes + 1 })),
  subVotes: () => set(state => ({ votes: state.votes - 1 })),
  getList: async () => {
    const data = await mockData();
    set({ list: data })
  }
}))
export { useStore }

// demo.js
import { useStore } from './store';
import shallow from 'zustand/shallow';
const Demo1 = () => {
  const { addVotes, subVotes, getList } = useStore(state => ({ addVotes: state.addVotes, subVotes: state.subVotes, getList: state.getList }), shallow);
  // const subVotes = useStore(state => state.subVotes);
  return 
} export default Demo1;

Dva

特点:

    • react状态管理的轻量框架,dva = react-router + redux + redux-sage + fetch。
    • api简单,上手难度低。
    • 支持异步,与umi搭配之后,复杂度更低。
// app.js
import dva from 'dva';

//  Initialize
const app = dva();

//  Model
app.model(require('./models/example').default);

//  Router
app.router(require('./router').default);

//  Start
app.start('#root');

// 定义modal


import { mockData } from '../utils/mock'
export default {
  namespace: 'example',
  state: {
    list: {}
  },

  reducers: {
    getlist(state, { data }) {
      console.log('state====', state);
      return { ...state, list: data };
    },
  },

  effects: {
    *getlistAsync({ payload }, { call, put }) {
      const data = yield call(mockData);
      yield put({ type: 'getlist', data });
    },
  },
};

// 消费
import { connect } from 'dva';
import Name from './name'

function IndexPage(props) {
  const { dispatch } = props
  const getlist = () => {
    dispatch({
      type: "example/getlistAsync",
    })
  };
  return (
    
); } const mapStateToProps = (state) => { return { example: state.example, }; }; export default connect(mapStateToProps)(IndexPage); // name 子组件 import { connect } from 'dva' const Name = ({ list }) => { return

name:{list.name}

}; const mapStateToProps = (state) => { return { list: state.example.list }; }; export default connect(mapStateToProps)(Name);

引用

Recoil

Mobx

Redux

Zustand

Dva

你可能感兴趣的:(React,Javascript,javascript,前端,react.js)