React状态管理比较原理

一、React状态管理库

按照23年下载使用顺序依次是:

  • Redux
  • Zustand
  • MobX
  • Recoil
  • Jotai
  • Valtio

二、各状态管理库简要概述

  1. Redux:Redux 是一个行业标准的状态管理库,它利用 flux 架构来创建不可变的数据存储。
    在这里插入图片描述

优点

  • 提供可预测的、一致的状态管理,因为状态总是通过一个称为 reducer 的纯函数,从上一个状态和派发的操作中派生出来的。
  • 便于调试和测试,因为状态和动作都是可序列化的,可以使用 devtools 或 Redux 工具包进行检查和操作。
  • 由于状态是集中化和模块化的,逻辑与用户界面组件是分离的,因此便于扩展和维护。

缺点

  • 存在大量模板代码、陡峭的学习曲线和冗长的语法。你可能需要使用 Redux Toolkit、Saga、Thunk、Reselect 或
    Immer 等其他库来简化和增强 Redux 体验。
  • 可能会带来性能问题,因为状态存储在单个对象中,随着时间的推移可能会变得越来越大、越来越复杂,如果优化不当,可能会导致组件不必要地重新渲染。
  • 可能不是简单或本地状态管理的最佳选择,因为它会给你的应用增加额外的复杂性和开销,而且可能无法利用某些 React
    功能或最佳实践,例如钩子、功能组件或不变性。

如果您热衷于在项目中使用 React Redux,那么您需要具备以下四点:

  • 动作:JavaScript 对象,代表改变应用程序状态的意图,也是将数据导入存储的唯一方法。

  • 调度器:Redux 存储中可用的函数,用于调度动作。当动作被分派后,Redux 会将该动作传递给还原器以计算新状态。

  • Reducers:将当前状态和动作作为参数并返回应用程序下一状态的纯函数。

  • Store:状态是所有应用数据的唯一来源。

  1. MobX :MobX 是一个库,它利用可观察对象和代理的强大功能来创建可直接写入或读取的反应式可变数据源。

【参考文档】
第3212期
第3139期
flux架构

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/610847.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python毕业设计django游泳馆管理系统-flask

游泳馆管理系统具有信息管理功能的选择。游泳馆管理系统采用python技术,基于mysql开发,实现了首页,教练信息,培训信息,交流版块,活动公告,个人中心,后台管理等内容进行管理&#xff…

数据治理项目——深铁集团数据治理规划

目录 一、前言 二、数据治理内容与主要措施 2.1 实施背景 2.2 主要举措 2.2.1 制定数据战略目标 2.2.2 绘制数据治理蓝图 2.2.3 绘制数据治理制度 2.2.4 梳理数据资产目录 三、 应用效果 3.1 数据资产可视化管理 3.2 数据标准治理 3.3 集团大数据平台优化建设 一、…

hbase基础shell用法

HBase中用create命令创建表,具体如下: create student,Sname,Ssex,Sage,Sdept,course 此时,即创建了一个“student”表,属性有:Sname,Ssex,Sage,Sdept,course。因为HBase的表中会有一个系统默认的属性作为行键&#x…

HWOD:最长回文子串

一、知识点 1、两层遍历&#xff0c;第一层i从0到n&#xff0c;第二层j从n到i 2、每一次的遍历&#xff0c;i确定子串的左边界l&#xff0c;j确定子串的右边界r 3、判断l和r界定的子串是否回文&#xff1a;while(l<r){如果下标为l和r的元素不相等&#xff0c;就break;l;r…

React + three.js 3D模型骨骼绑定

系列文章目录 React 使用 three.js 加载 gltf 3D模型 | three.js 入门React three.js 3D模型骨骼绑定React three.js 3D模型面部表情控制 项目代码(github)&#xff1a;https://github.com/couchette/simple-react-three-skeleton-demo 项目代码(gitcode)&#xff1a;https:…

WEB漏洞-文件上传之WAF绕过及安全修复

#上传参数解析&#xff1a; Content-disposition&#xff1a;一般不可更改 Name&#xff1a;表单参数值&#xff0c;不能更改&#xff08;更改需要达到统一&#xff09; Filename&#xff1a;文件名&#xff0c;可以更改 Content-type&#xff1a;文件MIME&#xff0c;视情…

4.11Qt

完善网络聊天室客户端实现 工程文件 QT core gui network 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpSocket> #include<QMessageBox>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEcl…

Linux 函数学习 poll

1、Linux poll 函数 int poll(struct pollfd *fds, nfds_t nfds, int timeout); fds&#xff1a; 需要轮询的fd集合 nfds&#xff1a;需要轮询的fds数量 timeout&#xff1a;超时时间 返回值&#xff1a;0 超时&#xff0c;<0 发生异常&#xff0c;> 0 存在数据变化 …

ETL中如何运用好MQ消息集成

一、ETL的主要作用 ETL&#xff08;Extract, Transform, Load&#xff09;是数据仓库中的关键环节&#xff0c;其主要作用是将数据从源系统中抽取出来&#xff0c;经过转换和清洗后加载到数据仓库中。具体而言&#xff1a; Extract&#xff08;抽取&#xff09;&#xff1a;从…

JS-28-AJAX

一、AJAX的定义 AJAX不是JavaScript的规范&#xff0c;它只是一个哥们“发明”的缩写&#xff1a;Asynchronous JavaScript and XML&#xff0c;意思就是用JavaScript执行异步网络请求。 如果仔细观察一个Form的提交&#xff0c;你就会发现&#xff0c;一旦用户点击“Submit”…

[BT]BUUCTF刷题第14天(4.10)

第14天&#xff08;共5题&#xff09; Web [BJDCTF2020]ZJCTF&#xff0c;不过如此 打开网站直接显示源代码&#xff1a; <?php error_reporting(0); //关闭报错 $text $_GET["text"]; $file $_GET["file"]; if(isset($text)&&(file…

计算机网络 Telnet远程访问交换机和Console终端连接交换机

一、实验要求和内容 1、配置交换机进入特权模式密文密码为“abcd两位班内学号”&#xff0c;远程登陆密码为“123456” 2、验证PC0通过远程登陆到交换机上&#xff0c;看是否可以进去特权模式 二、实验步骤 1、将一台还没配置的新交换机&#xff0c;利用console线连接设备的…