【React】常用Hook函数的梳理和总结（第二篇）

古狼_guwolf

已于 2024-01-04 14:52:09 修改

阅读量1.0k

点赞数 27

分类专栏：前端开发文章标签： react.js 前端前端框架

于 2024-01-03 21:00:59 首次发布

本文链接：https://blog.csdn.net/weixin_45620943/article/details/135369587

版权

前端开发专栏收录该内容

53 篇文章 2 订阅

订阅专栏

本文介绍了React中几种常见的Hook函数，如useState用于添加状态，useReducer管理状态，useEffect进行副作用处理，以及useMemo和useCallback的缓存功能。作者强调了在开发过程中查阅文档的重要性。

摘要由CSDN通过智能技术生成

1. 前言

本篇梳理和总结React中常用的Hook函数。欢迎大家来到Hook的世界，真的贼好用~

2. 常用Hook函数

Hook	说明	示例
useState(initialState)	功能：为函数组件添加状态变量，输入可是基本数据类型或引用数据类型，也可以是不带参数的纯函数，函数返回值作为初始值，输出则是状态和set函数组成的二值数组输入：State \| Function 输出：Array<State \| Function>	const [name, setName] = useState(‘Xiaoming’); setName(name => name + 'LI');
useReducer(reducer, initialArg, init?)	功能：创建一个用于管理状态的reducer，输出则是状态和dispatch函数组成的二值数组输入： reducer - 用于更新state的纯函数，参数为state和action，返回更新后的state initialArg - 用于初始化state的任意值 init? - 计算初始值的函数，如果存在，init(initialArg)执行结果作为初始值输出：Array<State \| Function>	const [name, dispatch] = useReducer(reducer, {name: 'xiaoming'}) dispatch({name: 'xiaoming'})
useEffect(setup, dependencies?)	功能：将组件与外部系统同步输入： setup - 处理Effect的函数，setup函数选择性返回一个清理函数cleanup dependencies - 依赖项数组输出：undefined	Effect(() => { const connection = createConnection(); connection.connect(); return () => { connection.close(); }; }, []);
useLayoutEffect(setup, dependencies?)	功能：useLayoutEffect是useEffect的一个版本，在浏览器重绘屏幕之前触发。注：可以影响性能，尽可能用useEffect 输入：同useEffect 输出：同useEffect	<略>
useInsertionEffect(setup, dependencies?)	功能：为CSS-in-JS库的作者特意打造，可以在布局副作用触发之前将元素插入到DOM中	<略>
useMemo(calculateValue, dependencies)	功能：缓存每次重新渲染都需要计算的结果输入： calculateValue - 计算缓存值的不带参数的纯函数，返回值可以是任意类型 dependencies - 依赖项数组输出：返回不带参数调用calculateValue的结果	const cachedData = useMemo(() => filterTodos(todos, tab), [todos, tab])
useCallback(fn, dependencies)	功能：缓存每次重新渲染都需要计算的结果输入： fn - 需要缓存的函数，此函数接受任何参数并返回任何值 dependencies - 依赖项数组输出：返回传入的fn，依赖项数组改变，则返回本次渲染传入的fn	const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]);
useRef(initialValue)	功能：引用一个不需要渲染的值输入：initialValue - ref对象current属性的初始值，可以是任意类型输出：{current: any} - 一个属性的对象	const inputRef = useRef(null);
useContext(SomeContext)	功能：读取和订阅组件中的context 输入：SomeContext - createContext创建的context 输出：返回context的值	const Context = createContext(/初始值/); const value = useContext(Context);
useId()	功能：生成传递给无障碍属性的唯一ID 输入：无输出：字符串ID
本篇仅列出几个常用的Hook，还有很多Hook，可以查阅 React 内置 Hook – React 中文文档