react hooks - 技术栈

React Hooks 是 React 16.8 引入的一项革命性特性，它允许你在函数组件中使用状态（state）和其他 React 特性，从而摆脱了必须编写类组件的束缚，让函数组件成为 React 开发的主流。

💡 为什么需要 Hooks？

Hooks 的出现主要为了解决类组件存在的一些问题：

逻辑复用困难：类组件中复用状态逻辑通常需要高阶组件或渲染属性等复杂模式，容易导致"包装地狱"。
复杂组件难以理解 ：生命周期方法（如 componentDidMount、componentDidUpdate）经常包含不相关的逻辑，而相关的逻辑又被分散到不同方法中。
类本身的复杂性 ：类中的 this 绑定对初学者不友好，并且类组件难以优化。

Hooks 通过让你在函数组件中直接使用状态和生命周期概念，提供了更简洁、更清晰的代码组织方式。

🛠️ 核心 Hooks 及使用场景

下表列出了最常用的几个 Hooks 及其典型应用场景：

Hook 名称	主要作用	基本用法示例	典型应用场景
`useState`	在函数组件中添加状态。	`const [count, setCount] = useState(0);`	管理组件内部状态，如输入框值、计数器、开关状态等。
`useEffect`	处理副作用操作。	`useEffect(() => { document.title = \`You clicked ${count} times`; }, [count]);`	数据获取、设置订阅、手动更改 DOM、日志记录等。
`useContext`	无需组件层层传递 prop，就能在组件树中轻松访问上下文数据。	`const theme = useContext(ThemeContext);`	全局主题、用户认证信息、语言偏好等跨组件层级的共享数据。
`useReducer`	用于管理复杂的状态逻辑，类似于 Redux 的状态管理。	`const [state, dispatch] = useReducer(reducer, initialState);`	状态逻辑复杂（如表单验证、多步骤流程）、下一个状态依赖于前一个状态。
`useMemo`	缓存昂贵的计算结果，避免每次渲染都进行重复计算。	`const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);`	优化性能，当计算量很大且依赖项未改变时。
`useCallback`	缓存回调函数，防止因为函数引用变化导致子组件不必要的重渲染。	`const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);`	将回调函数传递给优化过的子组件（被 `React.memo` 包裹）时。
`useRef`	返回一个可变的 ref 对象，其 `.current` 属性被初始化为传入的参数。	`const inputEl = useRef(null);` `inputEl.current.focus();`	直接访问 DOM 元素、存储不需要触发重新渲染的可变值（如上一次的状态、定时器 ID）。

✨ 自定义 Hooks：逻辑复用的利器

自定义 Hook 是一个以 use 开头的 JavaScript 函数，它内部可以调用其他的 Hooks。通过自定义 Hook，可以将组件逻辑提取到可重用的函数中，这是 Hooks 最强大的功能之一。

例如，你可以创建一个获取数据的自定义 Hook useFetch：

jsx 复制代码

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]); // 当 url 变化时重新获取数据

  return { data, loading, error };
}

// 在组件中使用
function MyComponent() {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{/* 渲染数据 */}</div>;
}

通过这种方式，任何需要获取数据的组件都可以直接使用这个 Hook，极大地简化了代码并促进了逻辑复用。

⚠️ 使用 Hooks 的规则与最佳实践

只在最顶层调用 Hooks ：不要在循环、条件或嵌套函数中调用 Hook。你必须确保 Hooks 在每次组件渲染时都以相同的顺序被调用。这是 React 能够正确管理 Hooks 状态的基础。
只在 React 函数中调用 Hooks：在 React 的函数组件中或自定义 Hook 中调用 Hooks。不要在普通的 JavaScript 函数中调用。
合理使用依赖数组 ：在使用 useEffect、useMemo、useCallback 等 Hook 时，务必正确声明依赖数组。可以使用 ESLint 的 eslint-plugin-react-hooks 插件来辅助检查。
性能优化 ：合理使用 useMemo 和 useCallback 来优化性能，但避免过早优化。只有在确实遇到性能问题时再考虑使用它们。

💎 总结

React Hooks 通过赋予函数组件强大的状态和生命周期管理能力，彻底改变了 React 的开发方式。它带来了更清晰的代码结构、更简单的逻辑复用和更低的学习成本。对于新项目，建议全面采用 Hooks 进行开发。

希望这份概述能帮助你快速上手 React Hooks。如果你对某个具体的 Hook 或使用场景有更深入的疑问，我们可以继续探讨。