React hooks 用法大全 ,包含React 19 新hooks

656 阅读2分钟

React Hooks 地图

WX20240406-155147@2x.png

useState

useState是最常用的hook

WX20240406-160219@2x.png

使用步骤

WX20240406-160521@2x.png

使用场景

受控组件

WX20240406-160635@2x.png

状态开关

WX20240406-160835@2x.png

控制样式

WX20240406-160940@2x.png

购物车计数

WX20240406-161135@2x.png

useReducer

用于相关状态的管理

WX20240406-161245@2x.png

使用步骤

WX20240406-161428@2x.png

使用场景

表单数据处理

WX20240406-161719@2x.png

游戏

WX20240406-162111@2x.png

useSyncExternalStore

不常用,除非你需要手写一个自己的状态库

WX20240406-162535@2x.png

useEffect

处理副作用的hook

WX20240406-163101@2x.png

使用步骤

WX20240406-163225@2x.png

使用场景

这两种副作用场景下不应该使用useEffect

副作用分为两大类型:基于事件(例如按钮点击)和基于渲染(例如数据获取)

WX20240406-163343@2x.png

事实上这两种副作用场景都不应该使用useEffect WX20240406-163559@2x.png

按钮点击不应该用useEffect

WX20240406-163659@2x.png

获取数据时不应该使用useEffect

WX20240406-163734@2x.png

适合使用的场景: 当需要和浏览器API交互时

WX20240406-164814@2x.png

useLayoutEffect

useLayoutEffect和useEffect的区别

WX20240406-165200@2x.png

使用场景和用法

WX20240406-165615@2x.png

useInsertionEffect

主要用在 css in js库的使用场景上,比useLayoutEffect的执行时机还早

WX20240406-165859@2x.png

useRef

WX20240406-170353@2x.png

使用步骤

WX20240406-170439@2x.png

ref和state的区别

WX20240406-170604@2x.png

使用场景

计数器

WX20240406-171249@2x.png

Dom操作

WX20240406-171500@2x.png

useImperativeHandle

WX20240406-171634@2x.png

用法和场景

WX20240406-172228@2x.png

WX20240406-172454@2x.png

useMemo

WX20240406-172536@2x.png

用法和使用场景

WX20240406-172713@2x.png

useCallback

WX20240406-172854@2x.png

用法和使用场景

WX20240406-173050@2x.png

useContext

WX20240406-173218@2x.png

用法和使用场景

WX20240406-173348@2x.png

useTranistion

WX20240406-173611@2x.png

用法和使用场景

WX20240406-173925@2x.png

useDeferredValue

WX20240406-174050@2x.png

用法和使用场景

WX20240406-174344@2x.png

useDebugValue

本地下载了React DevTools时可以用

WX20240406-174510@2x.png

useId

不要使用useId创建数据的唯一key

WX20240406-174830@2x.png

使用场景和用法

WX20240406-175059@2x.png

如何使用React 19

安装金丝雀版

WX20240406-175353@2x.png

React 19 可以废弃使用的hooks

useCallback useMemo memo可以废弃了

WX20240406-175718@2x.png

react 18的做法

WX20240406-175836@2x.png

react 19的做法

WX20240406-175853@2x.png

forwardRef可以废弃了

react 18的做法

WX20240406-180254@2x.png

react 19的做法

WX20240406-180357@2x.png

React 19 新增hook: use hook

主要用于加载移步资源,用于两大场景

WX20240406-180511@2x.png

获取数据场景

react 18的做法

WX20240406-180935@2x.png

react 19的做法

WX20240406-181052@2x.png

读取context数据的场景

react 18的做法

WX20240406-181252@2x.png

react 19的做法

WX20240406-181352@2x.png

React 19 actions的用法

WX20240406-181700@2x.png

React 19 新hook useFormStatus

WX20240406-181827@2x.png

用法

WX20240406-182118@2x.png

React 19 新hook useFormState

WX20240406-182319@2x.png

简单用法

WX20240406-182549@2x.png

购物车场景

WX20240406-182755@2x.png

React 19 新hook useOptimistic

WX20240406-182929@2x.png

使用场景 实时性高的聊天app

WX20240406-183134@2x.png