一. 基础钩子
(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 | 复杂状态逻辑 |
