https://github.com/sunnshare/react-hooks
react-hooks
https://github.com/sunnshare/react-hooks
usecallback usecontext useeffect uselayouteffect usememo usereducer usestate
Last synced: 8 months ago
JSON representation
react-hooks
- Host: GitHub
- URL: https://github.com/sunnshare/react-hooks
- Owner: sunnshare
- License: mit
- Created: 2024-02-09T15:45:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-22T15:05:40.000Z (over 1 year ago)
- Last Synced: 2024-12-27T18:11:54.435Z (9 months ago)
- Topics: usecallback, usecontext, useeffect, uselayouteffect, usememo, usereducer, usestate
- Language: JavaScript
- Homepage:
- Size: 130 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### useState
- params (state)，return [state, setState]
- 内部采用闭包，用 currentIndex 去记录 state 在 hookStates 数组中的位置
- 调用 setState 设置值时，将 state 改变，并重置 hookIndex，重新渲染组件
### useMemo
- params (() => {key: value}, [deps])，return {key: value}
- 初始以 [{key, value}, [deps]]形式 缓存在 hookStates 中
- 读取时比较前后 deps 的变化，不变则读取缓存，发生改变则重新缓存
### useCallback
- params (() => fn, [deps])，return () => fn
- 与 useMemo 实现基本一致
### useEffect
- params (callback, [deps])，return callback()
- 初始以 [callback(), [deps]]形式 缓存在 hookStates 中
- 读取时比较前后 deps 的变化，发生改变则调用 destroy 函数，重新缓存销毁函数和依赖
### useLayoutEffect
- 与 useEffect 基本一致，useEffect 用的是宏任务，useLayoutEffect 用的是微任务
### useReducer
- 与 useState 基本一致，在 hookStates 中记录了一个 reducer(state,action)
### useContext
- React.createContext() 会返回一个 context 将数据挂载到 \_currentValue 上