React 状态管理工具优劣势示例分析

目录
  • 什么是状态管理?
  • React 状态管理方案
    • 方案介绍
    • 方案对比
    • Source
    • 相关建议

什么是状态管理?

“状态”是描述应用程序当前行为的任何数据。这可能包括诸如“从服务器获取的对象列表”、“当前选择的项目”、“当前登录用户的名称”和“此模式是否打开？”等值。

众所周知，我们在研发一个复杂应用的过程中，一套好的状态管理方案是必不可少的，既能提升研发效率，又能降低研发维护成本，那么状态管理方案那么多，它们有什么不同，我们又该如何选择适合当前应用的方案呢？

本期将主要就 react 的常用状态管理方案进行对比分析，希望对各位看客有帮助。

React 状态管理方案

方案介绍

方案对比

框架 原理 优点 缺点
hooks context 基于 react hook，开发者可实现内/外部存储 1. 使用简单
2. 不需要引用第三方库，体积最小
3. 支持存储全局状态，但在复杂应用中不推荐
4. 不依赖 react 上下文，可在组件外调用（外部存储的条件下）		 1. context value发生变化时，所有用到这个context的组件都会被重新渲染，基于 content 维护的模块越多，影响范围越大。
2. 使用依赖 provider，修改 store 无法在应用最顶层(App.tsx 层级)触发渲染
3. 受ui框架约束(react)
4. 依赖hooks调用
react-redux Flux思想，发布订阅模式，遵从函数式编程，外部存储 1. 不依赖 react 上下文，可在组件外调用
2. 支持存储全局状态
3.不受ui框架约束		 1. 心智模型需要一些时间来理解，特别是当你不熟悉函数式编程的时候
2. 编码繁琐
mobx 观察者模式 + 数据截止，外部存储 1. 使用简单
2. 不依赖 react 上下文，可在组件外调用
3. 支持存储全局状态
4.不受ui框架约束		 1.可变状态模型，某些情况下可能影响调试 2. 除了体积相对较大之外，笔者目前未感觉到较为明显的缺点，3.99M
zustand Flux思想，观察者模式，外部存储 1. 轻量，使用简单
2. 不依赖 react 上下文，可在组件外调用
3. 支持存储全局状态		 1.框架本身不支持 computed 属性，但可基于 middleware 机制通过少量代码间接实现 computed ，或基于第三方库 zustand-computed 实现
2.受ui框架约束(react / vue)
jotai 基于 react hook，内部存储 1. 使用简单
2. 组件颗粒度较细的情况下，jotai性能更好
3.支持存储全局状态，但在复杂应用中不推荐		 1. 依赖 react 上下文， 无法组件外调用，相对而言, zustand 在 react 环境外及全局可以更好地工作
2. 受ui框架约束(react)
valtio 基于数据劫持，外部存储 1. 使用简单，类mobx（类vue）的编程体验
2.支持存储全局状态
3.不依赖 react 上下文，可在组件外调用
4. 不受ui框架约束		 1.可变状态模型，某些情况下可能影响调试
2.目前笔者没发现其它特别大的缺点，个人猜测之所以star相对zustand较少，是因为 valtio 的数据双向绑定思想与 react 存在冲突。

Source

  • hooks context

1.使用 react hooks + context 进行方便快捷的状态管理

2.使用 react hooks + context 构建 redux 进行状态管理

react-redux

  • mobx
import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"
// 状态及相关事件
class Timer {
    secondsPassed = 0
    constructor() {
        makeAutoObservable(this)
    }
    increase() {
        this.secondsPassed += 1
    }
    reset() {
        this.secondsPassed = 0
    }
}
const myTimer = new Timer()
// 构建可观擦组件
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))
ReactDOM.render(<TimerView timer={myTimer} />, document.body)
// 触发更新事件
setInterval(() => {
    myTimer.increase()
}, 1000)
  • zustand
import { create } from 'zustand'
// 状态及相关事件
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))
// 渲染视图
function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}
// 触发更新事件
function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}
  • jotai
import { atom } from 'jotai'
const countAtom = atom(0)
function Counter() {
  // 状态及相关事件
  const [count, setCount] = useAtom(countAtom)
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
    </h1>
  )
}
  • valtio
import { proxy, useSnapshot } from 'valtio'
const state = proxy({ count: 0, text: 'hello' })
function Counter() {
  const snap = useSnapshot(state)
  return (
    <div>
      {snap.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  )

相关建议

  • 如果你需要useState+useContext的替代品，那么jotai非常适合，即少量组件间状态共享。
  • 如果你习惯了redux或喜欢react的自然不可变更新，那么zustand将非常适合。
  • 如果你习惯了vue/ slute /mobx，或者是JS/React的新手，valtio的可变模型将很适合。
  • 如果你在使用 zustand(redux/等不可变数据模型) + immer，建议改用valtio(mobx)
  • mobx有actions概念，而valtio概念更为简单（自由），如果你希望工程更为规范，可以使用mobx，如果是希望工程更为自由便捷，可以使用valtio

以上就是React 状态管理工具优劣势示例分析的详细内容，更多关于React 状态管理工具优劣势的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • react native图片解析流程详解

    目录 正文 1. 构建输出的产物 2. js bundle分析 3. 图片source拼接 3.1 如果bundle放在服务器(本地开发) 3.2 bundle内置在app中(app下载bundle和assets后执行) 4. Image style的witdh和height没有声明会发生什么? 正文 我们知道,在react-native中加载一张图片需要使用Image组件,其有两种使用方式 import bg from './bg.png'; // 1. 加载本地图片资源 <Image sou

  • react hooks d3实现企查查股权穿透图结构图效果详解

    目录 前言 最终效果: 版本信息: 股权穿透图基础功能: 股权结构图基础功能: 股权穿透图代码 股权结构图代码 总结: 前言 umi+antd-admin 框架中使用hooks结合d3完成类似股权穿透图和股权结构图(web) 最终效果: 股权穿透图 股权结构图 版本信息: "d3": "4.13.0", "antd": "3.24.2", "umi": "^2.7.7", 股权穿透图基础

  • React18从0实现dispatch update流程

    目录 引言 hooks原理 useState初始化(mount) mountState mountWorkInProgressHook 处理hook数据 生成dispatch 更新的总结 useState触发更新(dispatch) updateState hook数据从哪里来 updateWorkInProgressHook hook在条件语句中报错 useState计算 双缓存树 总结 引言 本系列是讲述从0开始实现一个react18的基本版本.由于React源码通过Mono-repo 管理

  • React18系列reconciler从0实现过程详解

    目录 引言 React-Dom包 createRoot hostConfig.ts React-reconciler包 createContainer() 函数 render() 调用 创建更新createUpdate 将更新推进队列enqueueUpdate 开始调用scheduleUpdateOnFiber wookLoop beginWork开始 updateHostRoot reconcileChildren reconcileSingleElement 例子 completeWork开

  • React commit源码分析详解

    React commit源码分析详解

    目录 总览 commitBeforeMutationEffects commitMutationEffects 插入 dom 节点 获取父节点及插入位置 判断当前节点是否为单节点 在对应位置插入节点 更新 dom 节点 更新 HostComponent 更新 HostText 删除 dom 节点 unmountHostComponents commitNestedUnmounts commitUnmount commitLayoutEffects 执行生命周期 处理回调 总结 总览 commit

  • react echarts tree树图搜索展开功能示例详解

    目录 前言 最终效果 版本信息 核心功能: 关键思路: 附上代码 数据data.js 功能: TreeUtils 总结: 前言 umi+antd-admin 框架中使用类组件+antd结合echarts完成树图数据展示和搜索展开功能 最终效果 版本信息 "antd": "3.24.2", "umi": "^2.7.7", "echarts": "^4.4.0", "echart

  • react-native只保留3x图原理解析

    目录 引言 1. 输出构建产物 2. RN如何决定加载哪张scale图片? 3. repo中是否可以只保留3x图? 3.1 资源上传 3.2 资源下载 4. 结论 引言 我们的react-native项目中,一张图片一般会存在1x, 1.5x, 2x, 3x几种尺寸(1.5x是android特有的),以便在不同屏幕尺寸的手机加载对应尺寸的图片. 1. 输出构建产物 如果我们在代码中引入了一张图片,例如 // index.js import bg from './bg.png'; . ├── in

  • React 状态管理工具优劣势示例分析

    目录 什么是状态管理? React 状态管理方案 方案介绍 方案对比 Source 相关建议 什么是状态管理? “状态”是描述应用程序当前行为的任何数据.这可能包括诸如“从服务器获取的对象列表”.“当前选择的项目”.“当前登录用户的名称”和“此模式是否打开?”等值. 众所周知,我们在研发一个复杂应用的过程中,一套好的状态管理方案是必不可少的,既能提升研发效率,又能降低研发维护成本,那么状态管理方案那么多,它们有什么不同,我们又该如何选择适合当前应用的方案呢? 本期将主要就 react 的常用状态

  • 封装flutter状态管理工具示例详解

    目录 引言 RxBinder 代码实现 Demo 完美运行 引言 关于 Flutter 状态管理,公司项目使用的是Bloc方案.Bloc 其实本质上是 provider 的封装扩展库,整体通过 InheritedWidget .Notifier 外加 Stream中转实现状态变更通知. 关于 Bloc 实现原理,有兴趣的同学可以观看这篇文章 Bloc原理解析 RxBinder 撇开Bloc内部实现策略,小轰尝试基于数据驱动模型,自定义一套状态管理工具.构思如下: 主要成员如下: RxBinder

  • 关于React状态管理的三个规则总结

    目录 前言 No.1 一个关注点 No.2 提取复杂的状态逻辑 No.3 提取多个状态操作 总结 前言 React 组件内部的状态是在渲染过程之间保持不变的封装数据.useState() 是 React hook,负责管理功能组件内部的状态. 我喜欢 useState() ,它确实使状态处理变得非常容易.但是我经常遇到类似的问题: 我应该将组件的状态划分为小状态,还是保持复合状态? 如果状态管理变得复杂,我应该从组件中提取它吗?该怎么做? 如果 useState() 的用法是如此简单,那么什么时

  • React useEffect不支持async function示例分析

    目录 引言 React为什么这么设计呢? 简单改造 1.简单改造的写法(不推荐) 2.把异步提取成单独函数或自定义hook(推荐) 引言 useEffect相比大家都耳熟能详啦,如下这种写法,应该是非常常见的需求. useEffect(async () => { await getPoiInfo(); // 请求数据 }, []); 但是 React 本身并不支持这么做,理由是 effect function 应该返回一个销毁函数(effect:是指return返回的cleanup函数),如果

  • React状态管理器Rematch的使用详解

    目录 Rematch使用 1. Rematch介绍 2. Rematch特性 3. 基本使用 Rematch使用 1. Rematch介绍 Rematch是没有样板文件的Redux的最佳实践,没有action types. action creators, 状态转换或thunks. 2. Rematch特性 Redux 是一个了不起的状态管理工具,由良好的中间件生态系统和优秀的开发工具支持.Rematch 以 Redux 为基础,减少样板文件并强制执行最佳实践. 小于 2kb 的大小 无需配置

  • Vue3新状态管理工具实例详解

    Vue3新状态管理工具实例详解

    目录 前言 安装 创建Store State 定义State 获取state 修改state Getters Actions 异步action action间相互调用 数据持久化 安装 使用 自定义key 持久化部分state 最后 前言 Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇. Pinia.js 有如下特点: 完整的 typescript 的支持: 足够轻量,压

  • Vue新一代状态管理工具Pinia的具体使用

    Vue新一代状态管理工具Pinia的具体使用

    目录 前言 优点 安装 创建并挂载 创建store 使用store 回显与修改state 使用$patch对多条数据直接修改 使用actions 使用getters 多个store相互调用 数据持久化 安装 使用 总结 前言 Pinia是尤雨溪强烈推荐的一款Vue状态管理工具,也被认为是下一代Vuex的替代产品. 优点 去除了mutations,只有 state,getters和actions,其中actions支持了同步和异步操作 不会像Vuex那样有模块嵌套,Pinia只有store的概念,

  • React状态管理Redux的使用介绍详解

    React状态管理Redux的使用介绍详解

    目录 1. 简介 2. 核心概念 3. redux工作流 4. 模拟redux工作流程 5. 使用redux 6. react-redux 1. 简介 Redux 是 JavaScript 应用的状态容器(对象),提供可预测的状态管理.可以让你开发出行为稳定可预测的应用,运行于不同的环境(客户端.服务器.原生应用),并且易于测试.Redux 除了和 React 一起用外,还支持其它界面库. 解决的问题:多层级组件间通信问题. 2. 核心概念 单一数据源 整个redux中的数据都是集中管理,存储于

  • 更强大的React 状态管理库Zustand使用详解

    更强大的React 状态管理库Zustand使用详解

    目录 介绍 创建项目项目 安装项目依赖 创建项目结构 设置环境变量 服务 设置 store 清除/重置存储 介绍 在这篇文章中,我会介绍 Zustand 在实际项目中的使用. 我会构建一个 GitHub 用户搜索项目,在项目中通过调用 GitHub API 来实现搜索用户的功能.我还会并演示如何直接从 Zustand 存储中进行 API 调用,并将状态持久化到 sessionStorage 或 localStorage 中. 完成效果如下: 创建项目项目 首先,我们需要创建一个新的 React

  • Flutter状态管理Provider的使用示例详解

    目录 前言 计数器 全局状态 总结 前言 Provider是三大主流状态管理框架官方推荐使用的框架,它是基于官方数据共享组件InheritedWidget实现的,通过数据改变调用生命周期中的didChangeDependencies()方法,来实现状态的通知改变. InheritedWidget的使用可以参考我之前的这篇Flutter中几种数据传递的应用总结. 计数器 还是以计数器为例,这次通过Provider实现,provider相较于bloc并没有那么强制性分层,所以这里我们自己分为数据层(

随机推荐