React Hooks 地图
useState
useState是最常用的hook
使用步骤
使用场景
受控组件
状态开关
控制样式
购物车计数
useReducer
用于相关状态的管理
使用步骤
使用场景
表单数据处理
游戏
useSyncExternalStore
不常用,除非你需要手写一个自己的状态库
useEffect
处理副作用的hook
使用步骤
使用场景
这两种副作用场景下不应该使用useEffect
副作用分为两大类型:基于事件(例如按钮点击)和基于渲染(例如数据获取)
事实上这两种副作用场景都不应该使用useEffect
按钮点击不应该用useEffect
获取数据时不应该使用useEffect
适合使用的场景: 当需要和浏览器API交互时
useLayoutEffect
useLayoutEffect和useEffect的区别
使用场景和用法
useInsertionEffect
主要用在 css in js库的使用场景上,比useLayoutEffect的执行时机还早
useRef
使用步骤
ref和state的区别
使用场景
计数器
Dom操作
useImperativeHandle
用法和场景
useMemo
用法和使用场景
useCallback
用法和使用场景
useContext
用法和使用场景
useTranistion
用法和使用场景
useDeferredValue
用法和使用场景
useDebugValue
本地下载了React DevTools时可以用
useId
不要使用useId创建数据的唯一key
使用场景和用法
如何使用React 19
安装金丝雀版
React 19 可以废弃使用的hooks
useCallback useMemo memo可以废弃了
react 18的做法
react 19的做法
forwardRef可以废弃了
react 18的做法
react 19的做法
React 19 新增hook: use hook
主要用于加载移步资源,用于两大场景
获取数据场景
react 18的做法
react 19的做法
读取context数据的场景
react 18的做法
react 19的做法