https://github.com/kuangpf/react-hooks-demo

👏a collection of simple demos of React Hooks
https://github.com/kuangpf/react-hooks-demo

creat-react-app react react-hooks react-router

Last synced: 26 days ago
JSON representation

👏a collection of simple demos of React Hooks

• Host: GitHub
• URL: https://github.com/kuangpf/react-hooks-demo
• Owner: KuangPF
• License: mit
• Created: 2020-04-01T12:31:47.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T19:20:18.000Z (almost 2 years ago)
• Last Synced: 2024-02-23T03:33:54.483Z (9 months ago)
• Topics: creat-react-app, react, react-hooks, react-router
• Language: TypeScript
• Homepage: https://kuangpf.com/react-hooks-demo
• Size: 1.73 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react hooks demo

[![Github Actions](https://github.com/KuangPF/react-hooks-demo/workflows/Deploy%20to%20GitHub%20Pages/badge.svg)](https://github.com/KuangPF/react-hooks-demo/actions) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)](http://makeapullrequest.com)

This is a collection of simple [demos](https://kuangpf.com/react-hooks-demo/#/home) of React Hooks.

### Content

* **Basic Hooks**

  * [useState](https://kuangpf.com/react-hooks-demo/#/basic/useState)

  * [useEffect](https://kuangpf.com/react-hooks-demo/#/basic/useEffect)

  * [useContext](https://kuangpf.com/react-hooks-demo/#/basic/useContext)

* **Additional Hooks**

  * [useReducer](https://kuangpf.com/react-hooks-demo/#/additional/useReducer)

  * [useCallback](https://kuangpf.com/react-hooks-demo/#/additional/useCallback)

  * [useMemo](https://kuangpf.com/react-hooks-demo/#/additional/useMemo)

  * [useRef](https://kuangpf.com/react-hooks-demo/#/additional/useRef)

  * [useImperativeHandle](https://kuangpf.com/react-hooks-demo/#/additional/useImperativeHandle)

  * [useLayoutEffect](https://kuangpf.com/react-hooks-demo/#/additional/useLayoutEffect)

  * [useDebugValue](https://kuangpf.com/react-hooks-demo/#/additional/useDebugValue)

* **useReducer vs useState**

  * [reducerCountV1](https://kuangpf.com/react-hooks-demo/#/useReducer-useState/reducerCount-v1)

  * [stateCountV1](https://kuangpf.com/react-hooks-demo/#/useReducer-useState/stateCount-v1)

  * [stateCountV2](https://kuangpf.com/react-hooks-demo/#/useReducer-useState/stateCount-v2)

* **Custom Hooks**

  * [useProfile](https://kuangpf.com/react-hooks-demo/#/custom-hooks/useProfile)

  * [useInput](https://kuangpf.com/react-hooks-demo/#/custom-hooks/useInput)

* **Hooks vs Class**

  * [ClassGreet](https://kuangpf.com/react-hooks-demo/#/hooks-class/class-greet)

  * [Hooks-Great](https://kuangpf.com/react-hooks-demo/#/hooks-class/hooks-great)

该项目由 [cra](https://github.com/facebook/create-react-app) 创建，在此基础上加入了 [react-router](https://github.com/ReactTraining/react-router)，为了更好地理解 React Hooks，该仓库中部分代码来源于 React 社区。

### 仓库相关文章

* [React Hooks 讲解](https://kuangpf.com/blog/2020/04/25/react-hooks/)

* [why-react-hooks](https://kuangpf.com/blog/2020/05/04/why-react-hooks/)

### React Hooks 社区项目文章

* [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889)

* [a-complete-guide-to-useeffect](https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/)

* [Why you should choose useState instead of useReducer](https://medium.com/free-code-camp/why-you-should-choose-usestate-instead-of-usereducer-ffc80057f815)

* [When to useLayoutEffect Instead of useEffect](https://daveceddia.com/useeffect-vs-uselayouteffect/)

### License

MIT@KuangPF