# react_study

**Repository Path**: my_react_study/react_study

## Basic Information

- **Project Name**: react_study
- **Description**: 2025年最新react学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-03
- **Last Updated**: 2025-02-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react

## react 基础

> https://react.dev/learn

### 核心 api

```js
// react-basic
// react15 => react16.8 => react18 => react19

// jsx 虚拟dom react元素
// 函数组件 hooks
// 类组件 生命周期 props state 数据修改 setState
// ref对象 字符串 函数 useRef
// context上下文 useContext
// 事件系统合成事件
// dom-diff 对比vue2 vue3  不使用dom-diff
// react优化 PureComponent memo
// 高阶组件 hoc
// react使用ts类型
// 测试 React-testing-library 自动化测试
// react19新特性 use
```

### hooks

```js
// ahooks: https://ahooks.js.org/zh-CN/hooks/use-request/index
// react-use: https://streamich.github.io/react-use/
```

### 测试

```js
// test
```

## react 全家桶

### 脚手架

```js
// cra: https://create-react-app.dev/
// https://www.bilibili.com/video/BV1YV4y1j7ZD

// vite: https://cn.vitejs.dev/guide/
// https://www.bilibili.com/video/BV1Nf4y1R7hN/
```

### 路由

```js
// react-router-dom 不同版本的改动
// hash
// BrowserRouter

// 路由 react-router: vue-router
// https://www.bilibili.com/video/BV1di4y197Nb
// https://reactrouter.com/en/main v5 v6 版本
```

### 状态管理

```js
// redux: https://redux.js.org/introduction/getting-started
// redux-toolkit: https://redux-toolkit.js.org/introduction/getting-started
// mobx: https://mobx.js.org/README.html
// zustand: https://zustand-demo.pmnd.rs/
// jotai: https://jotai.org/
// xstate
```

### 样式

```js
// css
// scss
// less
// postcss
// bootstrap
// Tailwind tailwind 本质上就是个 postcss 插件
// unoCss
// BEM
// cssModule
// cssInJs emotion styled-components
// css变量
// 主题
// 暗黑模式
// stylelint
```

### 动画

```js
// react-motion
// react-transition-group
// react-spring
// Ant Motion
// framer motion
```

## 常见解决方案

```js
// 表单解决方案: formily (不维护了...)
// keep-alive
// 无限滚动: react-window react-infinite-scroll-component react-infinite-scroller
// 可视区域: react-intersection-observer
// 不可变数据: immer
// 拖拽库: react-dnd: https://www.bilibili.com/video/BV1RL411g7fR
// 文档: dumi storybook rspress
// 手势库: use-gesture
// 弹出框: @floating-ui
// 源码定位工具 click-to-react-component react-dev-inspector locatorjs
// 低代码:
```

## 组件库

```js
// ant design: https://ant-design.antgroup.com/components/overview-cn
// arco design: https://arco.design/react/docs/start
// mobile: https://mobile.ant.design/zh/guide/quick-start/
```

## ssr

```js
// nextjs https://www.nextjs.cn/
```

## 管理后台

```js
// umi
// antd-admin
// ele-admin
```

## react 源码

```js
// 简单实现 react
// simple-react: https://juejin.cn/post/6844903606567567367
// mini-react: https://github.com/lizuncong/mini-react
// 珠峰react15源码视频: https://www.bilibili.com/video/BV1dK411N7gp

// (1) 简单版本
// 图解react源码: https://blog.csdn.net/qq_35577655/article/details/120916432
// https://www.bilibili.com/video/BV1wF411e7Do?p=1&vd_source=958ddfb9552bf78af202e4feb239327c

// (2) 其他
// react16(慕课网): https://coding.imooc.com/class/chapter/309.html#Anchor
// 慕课网b站视频: https://www.bilibili.com/video/BV1ZF411N7vo/

// 文档: https://7kms.github.io/react-illustration-series/main/macro-structure

// (3) yyds react之父: kasong
// React技术揭秘: https://react.iamkasong.com/
// https://ke.segmentfault.com/course/1650000023864436
// https://www.bilibili.com/video/BV1KK4y1i7rx

// big-react https://github.com/BetaSu/big-react
// 从0实现react18: https://appjiz2zqrn2142.pc.xiaoe-tech.com/p/t_pc/goods_pc_detail/goods_detail/p_638035c1e4b07b05581d25db?channel_id=1085791
// react设计原理: https://item.jd.com/13576643.html
```