简言
React Hooks 是 React 16.8 引入的重要特性，它让函数组件也能拥有状态和生命周期等特性。以下是几个核心钩子函数的详细介绍：
1、useState - 维护状态
const[state,setState]=useState(initialState);
- 作用：在函数组件中添加局部状态
- 参数：初始状态值
- 返回值：当前状态和更新状态的函数
- 特点：状态更新会触发组件重新渲染，可以多次调用声明多个状态变量
2、useEffect-完成副作用操作作为异步函数来执行
useEffect(()=>{
//副作用代码
return()=>{
//清理函数
}；
}，[dependencies]);
- 作用：处副作用（数据获取、订阅、手动修改DOM等）
- 参数：副作用函数，依赖数组（可选）
- 执行时机：默认在每次渲染后执行，依赖数组为空时只执行一次，有依赖项时依赖变化才执行一次
- 清理函数：返回的函数会在组件卸载或下次effect执行前调用
3、useLayoutEffect-同步执行副作用
useLayoutEffect(()=>{
//副作用代码
},[dependencies]);
- 作用：与useEffect类型，但会在所有DOM变更后同步调用
- 执行时机：在浏览器执行绘制之前
- 适用场景：需要同步读取DOM布局或者触发同步渲染时
4、useRef-访问DOM元素
const refContainer=useRef(initialValue);
- 作用:访问DOM节点，保存可变值（不会触发重新渲染）
- 特点：返回一个ref对象，其
currents属性被初始化为传入的参数；修改.current不会触发组件重新渲染
5、useContext - 使用共享状态
const value = useContext(MyContext);
- 作用：订阅React context的值
- 参数：context对象（由
React.createContext创建） - 返回值：当前context的值
- 特点：避免组件多层传递props
6. useReducer - 类似Redux的状态管理
const [state, dispatch] = useReducer(reducer, initialState);
-
作用：复杂状态逻辑管理
-
参数：
- reducer函数：(state, action) => newState
- 初始状态
-
返回值：当前状态和dispatch函数
-
适用场景：状态逻辑复杂或包含多个子值
7. useCallback - 缓存函数
const memoizedCallback = useCallback(() => {
// 函数体
}, [dependencies]);
-
作用：返回一个记忆化的回调函数
-
参数：
- 内联回调函数
- 依赖数组
-
返回值：记忆化的函数
-
优化场景：防止子组件不必要的重渲染
对比总结
| 钩子 | 主要用途 | 执行时机 | 优化相关 |
|---|---|---|---|
| useState | 状态管理 | 渲染时 | - |
| useEffect | 副作用 | 渲染后 | - |
| useContext | 共享状态 | 渲染时 | - |
| useReducer | 复杂状态 | 渲染时 | - |
| useMemo | 缓存值 | 渲染时 | ✅ |
| useRef | DOM/可变值 | - | - |
| useLayoutEffect | 副作用 | DOM变更后 | - |
这些钩子函数共同构成了React函数组件的核心能力，合理使用它们可以编写出高效、可维护的函数组件。
