开场诗
和平自主人心向，邻里岂容强盗狂。
智勇运筹兵似虎，英雄横槊气如钢。
一拳打出新天地，百战赢来热土疆。
魔怪张牙应忐忑，山河随处有刀枪。
记录、分享工作中的遇到的各种疑难杂症和高效率编程方法！
觉得文章对你有启发，记得右上角添加【关注】，支持一下！
有哪些地方写的不对，或者你有不一样的简介记得下面留言或者私信我哦！
一、序言
大家好，这里是流光的频道，又到了和大家分享的时间。在现代前端开发中，状态管理是一个至关重要的部分。随着应用程序的复杂度增加，管理共享状态变得越来越困难。因此，状态管理库应运而生，并成为 React、Vue 等框架中不可或缺的一部分。本文将探讨一些当前市面上常见的状态管理库，如 Redux、Pinia 和 Vuex等等。所以我根据我们公司常用的状态管理库和一些市场上应用普遍广泛状态管理库来给大家分享一下。
二.React常用状态库
1.Redux
1.Redux 是一个用于 JavaScript 应用程序的状态管理库，它通过集中式的单一状态树来管理整个应用的状态。Redux 主要用于 React，但也可以与 Angular、Vue 等其他框架一起使用。学习网址：Redux - A JS library for predictable and maintainable global state management | Redux(因为React使用最广泛所以把它归为React)：
一般创建的使用的话是如图所示的目录结构：
index文件也可以叫store文件是仓库，action文件是触发状态更新的动作，selector文件也叫reducer文件是我状态更新的结果，types文件不是必须他存放的是我定义的触发动作的关键字，全局使用的常量等等。
// actions.js
export const increment = () => ({
type: 'INCREMENT'
});
// reducer.js
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
// store.js
import { createStore } from 'redux';
import counter from './reducer';
const store = createStore(counter);
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}> {/* 使用 Provider 包裹应用程序 */}
<App />
</Provider>,
document.getElementById('root')
);
// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './actions';
const App = () => {
const count = useSelector(state => state);
const dispatch = useDispatch();
return (
<div>
<p>{count}</p>
<button onClick={() => dispatch(increment())}>Increment</button>
</div>
);
};
export default App;
-
优缺点：
-
优点：
- 预测性强：状态是不可变的，任何时候都能追踪和调试。
- 社区支持：拥有大量的中间件和插件。
- 跨框架支持：不仅仅是 React，Redux 可以与任何框架一起使用。
-
缺点：
- 样板代码多：需要编写很多样板代码，特别是对于小型项目而言。
- 学习曲线较陡：需要理解很多概念，如 Action、Reducer、Store 和 Middleware。
- 性能问题：对于大型应用，状态更新的频繁渲染可能会影响性能。
2.Redux Toolkit
Redux Toolkit 是 Redux 的官方简化版本，提供类似 Pinia 的模块化功能。我们公司也在从Redux慢慢转变为Redux Toolkit，学习网站：Redux Toolkit | Redux Toolkit。
import { createSlice, configureStore } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';
// 创建 slice
const counterSlice = createSlice({
name: 'counter',
initialState: { count: 0 },
reducers: {
increment: (state) => {
state.count += 1;
},
},
});
// 导出 actions 和 reducer
const { increment } = counterSlice.actions;
const store = configureStore({ reducer: counterSlice.reducer });
// 使用状态
const App = () => {
const dispatch = useDispatch();
const count = useSelector((state) => state.count);
return (
<div>
<p>{count}</p>
<button onClick={() => dispatch(increment())}>Increment</button>
</div>
);
};
export default () => (
<Provider store={store}>
<App />
</Provider>
);
-
优缺点：
-
优点：
- 生态庞大：Redux 生态庞大，适合大型复杂应用。
- 简化： Redux Toolkit 简化了原 Redux 的样板代码，接近 Pinia 的开发体验。
- DevTools： 支持开发者工具 DevTools。
-
缺点：
- 配置复杂度高：虽然 Redux Toolkit 已经简化，但相比 React 内置 Hooks 仍然需要额外学习成本和配置步骤。
- 性能开销：Redux 使用中间件管理副作用，可能会带来额外性能开销，而 Hooks 直接依赖 React 内置机制，性能更优。
3.MobX
1.MobX 是一个响应式编程的状态管理库，能够自动追踪状态的变化并自动更新视图。MobX 的核心思想是 透明的响应式编程，即所有状态变更自动映射到视图上，学习网站：关于 MobX | MobX中文文档 | MobX中文网
import { observable, action, makeObservable } from 'mobx';
import { observer } from 'mobx-react';
// 创建 store
class Store {
count = 0;
constructor() {
makeObservable(this, {
count: observable,
increment: action,
});
}
increment() {
this.count++;
}
}
const store = new Store();
// 使用状态
const App = observer(() => (
<div>
<p>{store.count}</p>
<button onClick={() => store.increment()}>Increment</button>
</div>
));
export default App;
优点：
- 自动响应式更新，与 Vue 的响应式机制类似。
- API 简洁直观，易于学习。
- 性能出色，适合大型复杂应用。
4.Zustand
1.Zustand 非常轻量，API 简洁，与 Pinia 一样支持模块化和持久化，学习网站：一个小型、快速、可扩展的基本状态管理解决方案 - Zustand
import create from 'zustand';
// 创建 store
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
// 使用状态
const App = () => {
const { count, increment } = useStore();
return (
<div>
<p>{count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
export default App;
优点：
- 轻量级且易于上手。
- 类似 Pinia 的模块化设计，支持嵌套和组合。
- 支持异步操作和中间件扩展。
- 原生 TypeScript 支持。
5 Recoil (与 React 深度集成)
Recoil 是 React 官方开发的状态管理库，专为 React 设计，适合处理复杂状态依赖和派生状态，和React useState 用法差不多只不过useState是在当前组件内使用，Recoil 更适合需要跨多个组件共享和管理全局状态的应用。
import { atom, useRecoilState } from 'recoil';
// 定义 atom
const countState = atom({
key: 'countState', // 唯一标识符
default: 0, // 默认值
});
// 使用状态
const App = () => {
const [count, setCount] = useRecoilState(countState);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default App;
优点：
- 与 React Hooks 深度集成，语法和 React 状态管理一致。
- 适合复杂状态依赖和派生计算的场景。
- 提供时间旅行调试和并发模式支持。
三、Vue常用状态库
1.Vuex
Vuex 是 Vue.js 的官方状态管理库。它是一个集中式的状态管理库，可以用于管理 Vue 应用中的所有状态，学习网站：Vuex 是什么？ | Vuex
// store.js
import Vuex from 'vuex';
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
}
});
// App.vue
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
increment() {
this.$store.commit('increment');
}
}
};
</script>
-
优点：
- Vue 生态系统深度集成：与 Vue 的各个部分无缝集成。
- 成熟的功能：功能丰富，支持模块化和插件。
- 广泛的社区支持：有大量的教程、插件和中间件。
-
缺点：
- 样板代码多：需要写很多样板代码，特别是在 Vue 2.x 中。
- 对 Vue 3 支持稍显不足：虽然 Vuex 4.x 已支持 Vue 3，但它的 API 和设计思想并未充分利用 Vue 3 的 Composition API。
2.Pinia
Pinia 是 Vue 3 的官方状态管理库，它是 Vuex 的继任者。与 Vuex 相比，Pinia 提供了更简洁的 API，并且与 Vue 3 的 Composition API 更好地集成,学习地址：简介 | Pinia
// store.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++;
}
}
});
// App.vue
<template>
<div>
<p>{{ counter.count }}</p>
<button @click="counter.increment">Increment</button>
</div>
</template>
<script>
import { useCounterStore } from './store';
export default {
setup() {
const counter = useCounterStore();
return { counter };
}
};
</script>
优缺点：
-
优点：
- 简洁易用：API 设计简洁，易于上手。
- 与 Vue 3 深度集成：完全支持 Vue 3 的 Composition API。
- 性能：状态管理非常高效，针对性能进行了优化。
-
缺点：
- 仅限于 Vue：只适用于 Vue 3 项目，无法跨框架使用。
- 功能不如 Redux 完善：对于非常复杂的应用，Pinia 的功能可能会有所不足。
四、各个数据状态管理库对比
| 状态库 | 特点 | 适用场景 | 优缺点 |
|---|---|---|---|
| Redux | 需要大量样板代码，功能强大，支持中间件 | 中大型应用，复杂的状态逻辑 | 功能全面，生态成熟，但样板代码多，学习曲线陡峭 |
| Pinia | Vue 3 深度集成，简洁 API，支持模块化和持久化插件 | Vue 3 应用，状态简单到中等复杂的项目 | 简洁高效，但仅适用于 Vue 3 |
| Vuex | Vue 官方的状态管理库，功能丰富，适合 Vue 应用 | 中到大型 Vue 应用，特别是 Vue 2.x 项目 | 生态成熟，但在 Vue 3 中使用略显繁琐 |
| Recoil | 与 React 完美集成，灵活的粒度管理，支持派生状态计算 | 需要细粒度状态管理的 React 应用 | 适用于复杂应用，但社区和生态还在成长 |
| Zustand | 轻量级，API 简洁，性能优秀 | 中小型 React 应用，快速开发项目 | 功能较少，适合简单场景，不支持复杂的异步操作管理 |
| MobX | 响应式编程，自动更新视图，性能优秀 | 需要自动更新视图的中大型应用 | 学习曲线有些陡峭，调试不如 Redux 清晰 |
| Effector | 基于事件的状态管理，性能优越，支持副作用和异步操作 | 复杂的事件流管理，适合大型和动态应用 | 学习曲线较陡，文档和社区支持较少 |
随想
这篇文章只是给大家介绍类一些基本的状态管理库的使用情况，具体特和业务的复杂使用还需要大家阅读文档，要是大家有什么使用中的疑问可以留言在下面我们一起交流！！！
