【React篇 】React项目中常用的工具库

我们可以从项目初始化、开发、构建、检查及发布的顺序总结react项目开发常用的工具库。

  • 首先是初始化。

初始化工程项目一般用官方维护的 create-react-app,这个工具使用起来简单便捷,但 create-react-app 的配置隐藏比较深,修改配置时搭配 react-app-rewired 更为合适。国内的话通常还会用 dva 或者 umi 初始化项目,它们提供了一站式解决方案。dva 更关心数据流领域的问题,而 umi 更关心前端工程化。其次是初始化库,一般会用到 create-react-library,也基本是零配置开始开发,底层用 rollup 进行构建。如果是维护大规模组件的话,通常会使用 StoryBook,它的交互式开发体验可以降低组件库的维护成本。

  • 其次是开发。

开发通常会有路由、样式、基础组件、功能组件、状态管理等五个方面需要处理。

路由方面使用 React Router 解决,它底层封装了 HTML5 的 history API 实现前端路由,也支持内存路由。样式方面主要有两个解决方案,分别是 CSS 模块化和 CSS in JS。

CSS 模块化主要由 css-loader 完成,而 CSS in JS 比较流行的方案有classNames、 emotion 和  styled-components。emotion 提供 props 接口消灭内联样式;styled-components 通过模板字符串提供基础的样式组件。

基础组件库方面,一般管理后台使用 Antd,因为用户基数庞大,稳定性好;面向 C 端的话,主要靠团队内部封装组件。

功能组件就比较杂了,比如用于实现拖拽的有 react-dnd 和 react-draggable,react-dnd 相对于 react-draggable,在拖放能力的抽象与封装上做得更好,下层差异屏蔽更完善,更适合做跨平台适配;PDF 预览用过 react-pdf-viewer;视频播放用过 Video-React;长列表用过 react-window 与 react-virtualized,两者的作者是同一个人,react-window 相对于 react-virtualized 体积更小,也被作者推荐。最后是状态管理,主要是 Redux 与 Mobx,这两者的区别就很大了,Redux 主要基于全局单一状态的思路,Mobx 主要是基于响应式的思路,更像 Vue。

  • 然后是构建。

构建主要是 webpack、Rollup 、Vite 与 esBuild。webpack 久经考验,更适合做大型项目的交付;Rollup 常用于打包小型的库,更干净便捷;Vite主打极速的服务启动,轻量快速的热重载;esBuild 作为新起之秀,性能十分优异,与传统构建器相比,性能最大可以跑出 100 倍的差距,值得关注,尤其是与 webpack 结合使用这点,便于优化 webpack 构建性能。这几个库的详细对比可以看这里:webpack vs rollup vs vite vs esbuild vs @swc/core | Compare NPM Packages

  • 再者是检查。

检查主要是代码规范与代码测试编写。代码规范检查一般是 ESLint,再装插件,属于常规操作。编写代码测试会用到 jest、enzyme、react-testing-library、react-hooks-testing-library:jest 是 Facebook 大力推广的测试框架;enzyme 是 Aribnb 大力推广的测试工具库,基本完整包含了大部分测试场景;react-testing-library 与 react-hooks-testing-library 是由社区主推的测试框架,功能上与 enzyme 部分有所重合。

  • 最后是发布。

静态资源可托管在 CDN 上,需要在 webpack 中引入上传插件。可使用的 s3-plugin-webpack,主要是识别构建后的静态文件进行上传。

以上工具可总结为如下思维导图:

如果您还有其他好的工具库推荐,欢迎留言我更新汇总,共同提升开发效率 ~ O(∩_∩)O

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

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

相关文章

LC 26删除有序数组中的重复项

去重题,双指针,,因为题干说原地删除,且nums其余元素不重要。一个cur记录当前不重复的数应该插在第几位了,for循环里的i相当于是第二个指针(右指针),遍历数组来找不重复的元素 class …

25-ARM-V7架构

运行模式 User(USR):用户模式 linux系统用户进程,资源访问受限System(SYS):系统模式 linux内核,共用寄存器,资源自由访问IRQ:一般中断模式 硬件产生中断信号…

数据结构:模拟队列

数据结构&#xff1a;模拟队列 题目描述参考代码 题目描述 输入样例 10 push 6 empty query pop empty push 3 push 4 pop query push 6输出样例 NO 6 YES 4参考代码 #include <iostream>using namespace std;const int N 100010;int q[N], hh, tt;int m, x; string …

【代码随想录算法训练Day29】LeetCode 491.非递减子序列、LeetCode 46.全排列、LeetCode 47.全排列II

Day29 回溯第五天 LeetCode 491.非递减子序列 这道题比起子集II来说又多了要考虑的点&#xff0c;首先我们不能排序来去重了&#xff0c;因为这样会增加很多不合题意的递增序列。所以我们使用set来去重。同时还要注意题目对答案子集要求内部元素的数量要大于1。 这个代码有一…

二分搜索树深度优先遍历

二分搜索树深度优先遍历 二分搜索树&#xff08;Binary Search Tree&#xff0c;简称BST&#xff09;是一种特殊的二叉树&#xff0c;它具有以下特性&#xff1a;对于树中的任意节点&#xff0c;其左子树中的所有元素都小于该节点的值&#xff0c;其右子树中的所有元素都大于该…

`combineLatest` 和 `zip` 都是 RxJava 中用来组合多个流的操作符,但它们在行为和使用场景上有一些显著的区别。

combineLatest 和 zip 都是 RxJava 中用来组合多个流的操作符&#xff0c;但它们在行为和使用场景上有一些显著的区别。 combineLatest combineLatest 操作符会在每个源 Flowable 发出一项数据后&#xff0c;合并最新发出的数据项&#xff0c;并且每当任意一个源 Flowable 发…

C++STL---list知识汇总

前言 学习完list&#xff0c;我们会对STL中的迭代器有进一步的认识。list底层有很多经典的东西&#xff0c;尤其是他的迭代器。而list的结构是一个带头双向循环链表。 list没有reserve和resize&#xff0c;因为它底层不是连续的空间&#xff0c;它是用时随时申请&#xff0c;…

windows 系统中部署 windows_exporter

从 github 中下载安装包到本地路径&#xff1a; Releases prometheus-community/windows_exporter (github.com) 后台运行方式windows_exporter&#xff0c;进入命令提示符执行以下命令&#xff1a; > powershell -Command "Start-Process D:\windows_exporter\wind…

快排与归并的算法(非递归版)

一.快排 1.递归法(方法多样) 1>hoare版 注&#xff1a;该方法小编已经在上篇博客中介绍过了&#xff0c;就不在这里过多赘述了&#xff0c;如果有兴趣的小伙伴可以看看小编的上篇博客哦 2>挖坑法 1&#xff09;方法介绍&#xff1a;定义最左边的数据为key&#xff0…

GLM-4本地部署的实战教程

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

vue3 【实战】封装 “心跳“ 组件

需求描述 在控制台每秒打印一个“hello” 代码实现 <script setup> import { onMounted, onBeforeUnmount, ref } from "vue";const timer ref(0);onMounted(() > {function fn() {console.log("hello");timer.value setTimeout(fn, 1000);}tim…

Java面试题:Redis双写一致性问题

Redis双写一致性 缓存和数据库数据同步 正常流程: 读操作: 查询缓存,查询命中直接返回,没命中查询数据库将查询到的数据写入缓存,并设定超时时间 写操作: 删除缓存,修改数据库,在延时一段时间后再删除缓存 (延迟双删)延迟:等待数据库的主节点同步到从节点 因为如果先删…

QT: 读写ini配置文件(实现qml界面登录,修改)

目录 一.功能介绍 二.暴露属性 三.指定INI文件的路径和格式。 四.登录操作 1.检查INI文件中是否含有登录信息&#xff1b; 2.读取存储的ID&#xff1b; 3.读取存储的密码; 4.成功返回1&#xff1b;失败返回2&#xff1b; 五.修改账号 1.检查INI文件中是否含有登录信…

Java实现一个公共方法解析不同类型的表格

首先是公共方法 private String getCellValueAsString(Cell cell) {if (cell null) {return "";}String value "";switch (cell.getCellType()) {case STRING:value cell.getStringCellValue();break;case NUMERIC:if (DateUtil.isCellDateFormatted(ce…

九天毕昇深度学习平台 | 升级python版本3.8/配置ipynb内核

下载3.8版本 https://www.python.org/ftp/python/3.8.18/Python-3.8.18.tgz 解压 !tar -xvf Python-3.8.18.tgz 在终端配置 ./configure # (可选 --prefix/usr/local/python3.8.18&#xff09; make sudo make install 不指定 --prefix 时&#xff0c;configure 会将可执…

总结一下自己,最近三年,我做了哪些工作

简单总结下吧&#xff0c;我算是业务架构师&#xff0c;确实对得起这个名字&#xff0c;经常冲在一线&#xff0c;业务和架构相关的东西都有做&#xff0c;系统比较复杂&#xff0c;不过逐步了解谁都会熟悉的 下面简单列一列我这三年的工作情况吧&#xff0c;也算是给自己一个交…

webshell工具流量特征

一、蚁剑&#xff08;PHP用base64加密&#xff09; 将蚁剑的正文内容进行URL解码后&#xff0c;流量最中明显的特征为ini_set("display_errors","0");这段代码基本是所有WebShell客户端链接PHP类WebShell都有的一种代码&#xff0c;但是有的客户端会将这段…

JavaScript Promise

JavaScript Promise是一种用于处理异步操作的内置对象。它提供了一种更加优雅、可读性更高的方法来处理多个异步操作的结果。 下面是一个例子&#xff0c;演示了如何使用Promise来处理异步操作&#xff1a; function fetchData(url) {return new Promise(function(resolve, r…

实操:serverless-step-functions-local

目录 问题 依赖组件 调用流程 代码设置 1、安装依赖插件&#xff1a; 2、serverless.yml配置&#xff0c;我这里只提供stepfunction依赖的配置 3、业务代码中使用本地stepfunction 4、启动serverless offline 5、docker 安装启动stepfunction ⚠️注意 1、docker访问…

【Linux系统查看显卡支持的OpenGL版本】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、安装依赖项二、Linux系统查看显卡支持的OpenGL版本 一、安装依赖项 sudo apt-get update && sudo apt-get install mesa-utils二、Linux系统查看显卡支…