React常用技术栈

发表于 更新于 分类于 ， 阅读次数： 本文字数： 1.1k 阅读时长 ≈ 4 分钟
React常用技术栈(问卷编辑器)。

创建项目环境

创建项目

Create-React-App (CRA)

  • 使用了 Webpack、Babel、ESLint 和其他优秀的项目作为基础层

  • 创建项目命令

1
npx create-react-app my-app

Vite

  • 创建项目命令

1
npm create vite@latest my-app -- --template react

Next.js

介绍

Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。

适用于简单的C端应用

  • 创建项目命令

1
2
3
npx create-next-app@latest
# or
yarn create next-app

  • 创建 TS 项目

1
2
3
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

代码规范

ESLint

介绍

ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具，其目的是使代码风格更加一致并避免错误

Prettier

介绍

Prettier 是一款代码格式化工具，可以将项目代码格式统一化,并且美化代码

Husky

介绍

Husky 是一个 Git Hooks 工具，它允许您在 Git 提交之前运行脚本，在提交或推送时自动检查你的提交消息、代码并运行测试。

commit-lint

介绍

commitlint 是一个 git commit 校验约束工具。

扩展配置

craco.js

介绍

由于 CRA 的配置是被隐藏的,我们不应把它显示出来并对其进行修改,于是出现了 craco.js
通过 craco，开发者可以使用自定义覆盖原先配置，以满足项目的特定需求。例如：可以添加自定义 webpack 的 loader，plugin，修改 webpack 的输出路径等。

React 基础

Hooks

必备

了解

Hooks 规则

  • 必须用 useXxx 格式来命名

  • 只能在 组件内 和 其他Hook 中调用 Hook

  • 必须保证每次的调用顺序一致 (不能放在 if/for 中)

hooks 库

CSS 样式

普通 CSS

CSS 样式指南

CSS-Module

  • CRA 内置,样式文件命名未xxx.module.css

  • 在 tsx 中通过 import xxx from './xxx.module.css 方式引入

  • 在组件中通过 className={xxx.xxx} 引入

  • 样式名会自动添加前缀，避免样式冲突

CSS-in-JS

最初网页开发有一个原则,叫做 关注点分离,但 React 出现后,这个原则便不再使用了,因为 React 的组件化设计已经将关注点分离了,组件的样式应该与组件本身一起放在一起,而不是通过 CSS 文件来引入。

在思想上 CSS in JS 和 JSX 差不多，简单来说，就是在 JS 环境中写 CSS 相关的样式

优点:

  • 用 js 写,有逻辑有变量,非常灵活

缺点:

  • JSX 和样式代码混在一块,代码较多,增加了编译成本

classnames

介绍

classnames用于动态添加类名

路由

UI 组件库

表单组件

  • 受控组件

受控组件是指在 React 中，表单元素的值由 React 组件的 state 管理的组件。这意味着表单元素的值是由 React 组件的状态决定的，而不是由 DOM 本身决定的。

Ajax 网络请求

状态管理

  • 状态提升

状态提升是指将多个组件中需要共享的状态提升到它们的最近共同父组件中进行管理。这样可以确保这些组件能够访问和修改相同的状态，从而实现数据的同步和共享。

Immer 是一个用于简化不可变数据操作的 JavaScript 库。它允许你在不可变数据结构上进行可变操作，同时自动产生新的不可变数据结构。这使得编写不可变数据管理的代码变得更加简单和直观

  • Redux-undo: Redux State Container 的简单撤消/重做功能

拖拽排序

可视化图表

性能优化

测试