# ReactUtilsDemo

**Repository Path**: fushengruomeng13/ReactUtilsDemo

## Basic Information

- **Project Name**: ReactUtilsDemo
- **Description**: React 相关插件、效果以及工具用法讲解的 Demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-30
- **Last Updated**: 2021-07-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ReactUtilsDemo

React 相关插件、效果以及工具用法讲解的 Demo

## 下载命令

> 当前项目中含有多个 Demo，下载完成后请打开对应的 Demo 再运行效果。各 Demo 的用法请看对应的项目说明文档。

下载当前项目：

```bash
git clone https://github.com/beichensky/ReactUtilsDemo.git
```

## immutability-helper-basic

详细介绍了 immutability-helper 插件的基本用法及注意事项。

更多详细请查看：[项目说明文档](https://github.com/beichensky/ReactUtilsDemo/blob/master/immutability-helper-basic/README.md)

## react-component-lifecycle

详细介绍了 React 生命周期各个阶段的执行顺序。

更多信息请查看：[项目说明文档](https://github.com/beichensky/ReactUtilsDemo/blob/master/react-component-lifecycle/README.md)

## redux-devtools-demo

简单介绍了 redux-devtools-extension 插件的基本用法。更多信息请查看：[项目说明文档](https://github.com/beichensky/ReactUtilsDemo/blob/master/redux-devtools-demo/README.md)

## react-dnd-dustbin

详细介绍了 `react-dnd` 的常用 API 及其用法。该项目是一个 `Dustbin` 类型的 `Demo` ，里面是 `react-dnd` 的一些基本用法。代码量不多，通俗易懂。可以将项目拉下来看看运行效果，对照代码查看实现逻辑，效果更佳。

效果图：

![react-dnd-dustbin 预览](https://github.com/beichensky/ReactUtilsDemo/blob/master/react-dnd-dustbin/Dustbin效果.gif)

更多信息请查看：[项目说明文档](https://github.com/beichensky/ReactUtilsDemo/blob/master/react-dnd-dustbin/README.md)

## react-dnd-hooks-demo

该项目是一个稍微复杂一些的拖拽项目。使用 `react-hooks` 的方式实现了拖拽放置、拖拽排序等功能。

可以看一下效果图，有需要类似效果的朋友可以看看：

![react-dnd-hooks-demo 预览](https://github.com/beichensky/ReactUtilsDemo/blob/master/react-dnd-hooks-demo/拖拽并排序预览.gif)

更多信息请查看：[项目说明文档](https://github.com/beichensky/ReactUtilsDemo/blob/master/react-dnd-hooks-demo/README.md)

## react-redux-demo

详细介绍了 redux 和 react-redux 的用法。

更多信息清查看：[项目说明文档](https://github.com/beichensky/ReactUtilsDemo/blob/master/react-redux-demo/README.md)

## react-my-redux

实现 `redux` 及 `react-redux` 的核心 API，对 `redux` 的整体流程以及设计思想做了一次梳理。

其中包含 `redux` 和 `react-redux` 由浅入深的用法。

更多信息清查看：[项目说明文档](https://github.com/beichensky/ReactUtilsDemo/blob/master/react-my-redux/README.md)