React中常用Hook简介

目录

1. 在 React 中，useEffect()、useState() 等是 Hooks，用于在函数组件中添加状态管理、副作用处理等功能，使函数组件具备类组件的能力。这些 Hook 是现代 React 编程的基础。下面分别介绍几个常用的 Hook：
2. 🔹 1. useState()
3. ✅ 作用：
4. ✅ 用法：
5. ✅ 参数与返回值：
6. ✅ 典型使用场景：
7. 🔹 2. useEffect()
8. ✅ 作用：
9. ✅ 用法：
10. ✅ 参数说明：
11. ✅ 典型使用场景：
12. 🔹 3. useRef()
13. ✅ 作用：
14. ✅ 用法：
15. ✅ 典型使用场景：
16. 🔹 4. useMemo() 和 useCallback()
17. ✅ 用于性能优化
18. 🔸 useMemo()：缓存“计算结果”
19. 🔸 useCallback()：缓存“函数引用”
20. ✅ 使用场景：
21. 🔹 5. useContext()
22. ✅ 作用：
23. 总结对比表：

在 React 中，useEffect()、useState() 等是 Hooks，用于在函数组件中添加状态管理、副作用处理等功能，使函数组件具备类组件的能力。这些 Hook 是现代 React 编程的基础。下面分别介绍几个常用的 Hook：#

🔹 1. useState()#

✅ 作用：#

用于在函数组件中添加状态变量。

✅ 用法：#

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);  // 声明一个状态变量 count，初始值为 0

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>加一</button>
    </div>
  );
}

✅ 参数与返回值：#

• useState(initialValue)：传入初始状态值。
• 返回 [state, setState]：当前状态值 和 更新状态的函数。

✅ 典型使用场景：#

• 表单输入值管理
• 页面内部计数、开关等 UI 状态
• 控制弹窗/模态框显隐等

---

🔹 2. useEffect()#

✅ 作用：#

用于副作用处理：如数据请求、订阅、事件监听、手动 DOM 操作等。

✅ 用法：#

import { useEffect, useState } from 'react';

function UserInfo({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      const res = await fetch(`/api/users/${userId}`);
      const data = await res.json();
      setUser(data);
    }
    fetchUser();
  }, [userId]); // 依赖数组：userId 改变时重新执行 effect

  return <div>{user ? user.name : '加载中...'}</div>;
}

✅ 参数说明：#

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理逻辑（可选）
  };
}, [依赖项]);

✅ 典型使用场景：#

• 页面初始数据加载（如 AJAX 请求）
• 订阅事件（如 WebSocket、window 事件）
• 设置/清理定时器
• 清理资源（如组件卸载时）

---

🔹 3. useRef()#

✅ 作用：#

创建一个可变的引用对象，不会触发组件重新渲染。

✅ 用法：#

const inputRef = useRef();

function FocusInput() {
  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>聚焦输入框</button>
    </>
  );
}

✅ 典型使用场景：#

• 获取 DOM 节点
• 保留上一次的值
• 存储不需要触发重新渲染的数据（如定时器 ID）

---

🔹 4. useMemo() 和 useCallback()#

✅ 用于性能优化#

🔸 useMemo()：缓存“计算结果”#

const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

🔸 useCallback()：缓存“函数引用”#

const handleClick = useCallback(() => doSomething(id), [id]);

✅ 使用场景：#

• 防止子组件重复渲染（配合 React.memo）
• 避免不必要的计算（如排序、大型列表）

---

🔹 5. useContext()#

✅ 作用：#

使用 React 上下文传递的数据（如主题、用户信息等）

const ThemeContext = React.createContext('light');

function MyComponent() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>内容</div>;
}

---

总结对比表：#