当前位置：首页 > news >正文

React中常用的钩子函数:

news 来源：原创 2025/5/23 5:51:47

一. 基础钩子

`(1)useState`

用于在函数组件中添加局部状态。useState可以传递一个参数，做为状态的初始值，返回一个数组，数组的第一个元素是返回的状态变量，第二个是修改状态变量的函数。

const [state, setState] = useState(initalState); // 初始化，state可以任意命名setState(newState); // 修改state的值

`(2)useEffect`

处理副作用（如数据获取、订阅、手动 DOM 操作等）。若一个函数组件中定义了多个useEffect，那么他们实际执行顺序是按照在代码中定义的先后顺序来执行的。 useEffect可以传入2个参数:

第1个参数是定义的执行函数,组件挂载和更新就会执行。
第2个参数是依赖关系(可选参数),如果不传则每次渲染都会去执行，传值的话在依赖项发生改变时函数中的代码才会执行，如果传空数组则会在组件第一次挂载才会执行。
return 出去的代码会在组件卸载时才会执行。

useEffect(() => {// 此处编写 组件挂载之后和组件重新渲染之后执行的代码...return () => {// 此处编写 组件即将被卸载前执行的代码...}
}, [dep1, dep2 ...]); // 依赖数组

`(3)useContext`

读取 React 的上下文（Context）值。useContext 可以避免多层 props 传递就能共享状态。具体用法看下面步骤：

先封装一个js,里面可以设置初始值，这个初始值，可以在任何地方使用:


import React from 'react';
const UserContext = React.createContext( { name: '张三' });   //参数是默认值，可填可不填
export default UserContext;

在代码中引用封装好的js文件

import React, { useContext } from 'react'
import UserContext from './context';function Demo() {
// 如果React.createContext没有指定默认值，可以在对应子组件上套上UserContext.Provider来指定值return (<UserContext.Provider value={{ name: '张三' }}><Child /></UserContext.Provider>)
}function Child() {const user = useContext(UserContext);return (<div><p>{`name: ${user.name}`}</p></div>)
}export default Demo;

二. 性能优化钩子

`(1)useMemo`

缓存计算结果，避免重复计算（类似 Vue 的 computed）。useMemo 可以传入2个参数，第1个参数为函数，用来进行一些计算，第2个参数是依赖关系(可选参数)，返回值为第一个函数 return 出去的值，只有在依赖项发生变化时才会重新执行计算函数进行计算，如果不传依赖项，每次组件渲染都会重新进行计算。

useMemo在组件顶层调用
useMemo不能在事件处理函数、循环或条件语句中调用

const memoizedValue = useMemo(() => {// 计算逻辑...return res;
}, [a, b]);

`(2)useCallback`

缓存函数，避免子组件不必要的重渲染。


function Parent() {// 不使用 useCallback - 每次渲染都会导致 Child 重新渲染const handleClick = () => { /*...*/ };// 使用 useCallback - 避免 Child 不必要的重新渲染const handleClick = useCallback(() => {/*...*/}, []); // 空依赖表示函数永不变化return <Child onClick={handleClick} />;
}

`(3)useTransition` (React 18+)

标记非紧急更新，优化渲染优先级（如搜索框输入时的延迟渲染）。

const [isPending, startTransition] = useTransition();

`(4)useDeferredValue` (React 18+)

延迟更新某些值，避免界面卡顿（如大型列表渲染）。

const deferredValue = useDeferredValue(value);

3. 引用与 DOM 操作

`(1)useRef`

可以获取 dom 和 react 组件实例。

import { useRef } from 'react'function Demo() {const inputRef = useRef();const handleFocus = () => {inputRef.current.value = 'focus';inputRef.current.focus();}return (<div><input ref={inputRef} /></div>)
}export default Demo;

`(2)useImperativeHandle`

自定义暴露给父组件的 ref 实例（通常配合 forwardRef 使用）。父组件通过ref.current.getValue()获取子组件中的value值。

const RichTextEditor = forwardRef((props, ref) => {const [value, setValue] = useState('');useImperativeHandle(ref, () => ({getValue: () => value,}));return (...);
})export default RichTextEditor;

4. 其他钩子

`(1)useReducer`

复杂状态逻辑管理（类似 Redux 的 reducer）。

// 代码示例
import React, { useReducer } from 'react'// 1.需要有一个 reducer 函数，第一个参数为之前的状态，第二个参数为行为信息
function reducer(state, action) {switch (action) {case 'add':return state + 1;case 'minus':return state - 1;default:return 0;}
}function Demo() {// 2.引入useReducer，第一个参数时上面定义的reducer，第二个参数时初始值// 3.返回为一个数组，第一项为状态值，第二项为一个 dispatch 函数，用来修改状态值const [count, dispatch] = useReducer(reducer, 0);return (<div><button onClick={() => { dispatch('add') }} >add</button><button onClick={() => { dispatch('minus') }} >minus</button><button onClick={() => { dispatch('unknown') }} >unknown</button><p>{`count: ${count}`}</p></div>);
}export default Demo;

`(2)useLayoutEffect`

类似 useEffect，但会在 DOM 更新后同步执行（适合测量 DOM 布局）。useLayoutEffect 使用方法、所传参数和 useEffect 完全相同。大多数情况下将 useEffect 替换成 useLayoutEffect 完全看不出区别。
唯一区别就是：使用 useEffect 时，页面挂载会出现闪烁。而使用 useLayoutEffect 时页面没有闪烁，是因为 useEffect 是在页面渲染完成后再去更新数据的，所以会出现短暂的闪烁，而 useLayoutEffect 是在页面还没有渲染时就将数据给更新了，所以没有出现闪烁。
注意：大部分情况用useEffect就足够了，useLayoutEffect 会阻塞渲染，所以需要小心的使用。

`(3)useDebugValue`

在 React 开发者工具中为自定义钩子添加标签。

useDebugValue(value, formatFn);

`(4)useId` (React 18+)

生成唯一 ID，用于无障碍访问（a11y）或表单关联。

const id = useId();

三.使用场景总结

钩子	用途
`useState`	管理组件内部状态
`useEffect`	处理副作用（API 调用、订阅等）
`useContext`	跨组件共享状态
`useMemo`/`useCallback`	优化性能，避免重复计算/渲染
`useRef`	操作 DOM 或保存可变值
`useReducer`	复杂状态逻辑