精通 React Hooks：从核心技巧到自定义实践

引言

自从 React 16.8 版本发布以来，Hooks 已经彻底改变了我们编写 React 组件的方式。它让我们告别了繁琐的 Class Components 和 this 关键字，拥抱了更简洁、更直观的函数式编程范式。Hooks 不仅让代码量大大减少，更重要的是提升了逻辑复用的能力，使得状态逻辑和副作用管理变得前所未有的清晰和优雅。

然而，仅仅知道 Hooks 的 API 是不够的。在实际项目开发中，如何正确、高效 地使用它们，避免常见的陷阱，发挥其最大威力，才是我们进阶的关键。本文将聚焦于 React Hooks 在实战中的应用技巧和常见模式，分享一些核心 Hooks 的实用心得，并带你领略自定义 Hooks 的魅力，希望能帮助你更自信地在项目中使用 Hooks。

核心 Hooks 的实用技巧

掌握 useState 和 useEffect 是 Hooks 入门的基础，但用好它们还有不少学问。useCallback 和 useMemo 则是性能优化的利器，但也容易被误用。

`useState`：不仅仅是状态

useState 是最基础的 Hook，但这两个细节值得关注：

函数式更新 (Functional Updates): 当新状态依赖于前一个状态时，务必使用函数式更新！这能确保你拿到的是最新的状态值，特别是在状态更新可能是异步的情况下。

javascript 复制代码

javascript复制代码
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // 错误示例：如果在短时间内多次调用，可能基于旧的 count 值
  // const handleIncrement = () => setCount(count + 1);

  // 正确示例：总是基于前一个状态计算新状态
  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1); // 连续调用也能正确工作
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

处理对象/数组状态： React 的状态更新遵循不可变性 (Immutability) 原则。直接修改对象或数组的属性/元素不会触发重新渲染，因为它们的引用没有改变。你需要创建新的对象或数组。

javascript 复制代码

javascript复制代码
import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Alice', age: 30 });
  const [tags, setTags] = useState(['react', 'hooks']);

  const handleAgeIncrease = () => {
    // 错误: 直接修改
    // user.age += 1;
    // setUser(user);

    // 正确: 创建新对象
    setUser(prevUser => ({ ...prevUser, age: prevUser.age + 1 }));
  };

  const handleAddTag = (newTag) => {
    // 错误: 直接修改
    // tags.push(newTag);
    // setTags(tags);

    // 正确: 创建新数组
    setTags(prevTags => [...prevTags, newTag]);
  };

  return (
    <div>
      <p>Name: {user.name}, Age: {user.age}</p>
      <button onClick={handleAgeIncrease}>Increase Age</button>
      <p>Tags: {tags.join(', ')}</p>
      <button onClick={() => handleAddTag('typescript')}>Add TypeScript Tag</button>
    </div>
  );
}

`useEffect`：驾驭副作用

useEffect 用于处理副作用，如数据获取、DOM 操作、订阅等。理解其依赖项数组 (Dependency Array) 是关键：

无依赖项 (useEffect(() => {...})): 每次组件渲染之后都会执行。谨慎使用，可能导致性能问题或死循环。
空数组依赖项 (useEffect(() => {...}, [])): 仅在组件挂载 (Mount) 时执行一次，相当于 componentDidMount。非常适合执行只需运行一次的设置，如添加全局事件监听器或初始数据获取。
包含依赖项 (useEffect(() => {...}, [dep1, dep2])): 在组件挂载时执行，并且只有当 依赖项数组中的任何一个值 发生变化时，才会在重新渲染后再次执行。这是最常用的模式，用于响应 props 或 state 的变化。

副作用清理 (Cleanup): 如果 useEffect 执行了需要清理的操作（如设置定时器、订阅事件、创建 WebSocket 连接），需要返回一个清理函数 。这个函数会在组件卸载 (Unmount) 时执行，或者在下一次 useEffect 即将执行之前执行（用于清理上一次 effect 的残留）。

javascript 复制代码

javascript复制代码
import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const [isActive, setIsActive] = useState(true);

  useEffect(() => {
    if (!isActive) {
      return; // 如果计时器非激活状态，则不设置 interval
    }

    console.log('Setting up interval...');
    const intervalId = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // 清理函数
    return () => {
      console.log('Clearing interval...');
      clearInterval(intervalId);
    };
  }, [isActive]); // 依赖 isActive 状态

  // 模拟生命周期:
  // useEffect(() => { console.log('Component Mounted'); return () => console.log('Component Unmounted'); }, []);
  // useEffect(() => { console.log('Seconds updated:', seconds); }, [seconds]);

  return (
    <div>
      <p>Seconds: {seconds}</p>
      <button onClick={() => setIsActive(!isActive)}>
        {isActive ? 'Pause' : 'Resume'}
      </button>
    </div>
  );
}

模拟生命周期： 虽然 useEffect 的心智模型是"同步"而非"生命周期"，但可以通过依赖项模拟 Class Components 的部分生命周期行为，如上例注释所示。但更推荐从副作用同步的角度去理解它。

`useCallback` vs `useMemo`：性能优化的双刃剑

这两个 Hooks 用于优化性能，但需要明智地使用，否则可能适得其反。

useCallback(fn, deps): 返回一个 memoized (记忆化) 的回调函数 。当依赖项 deps 没有改变时，它会返回相同的函数实例。主要用于：
- 将回调函数传递给经过 React.memo 优化的子组件时，防止因子组件的 props (函数也是 props) 变化而导致不必要的重渲染。
- 当回调函数是另一个 Hook (如 useEffect) 的依赖项时，避免因函数实例变化触发不必要的 effect。
useMemo(createFn, deps): 返回一个 memoized 的值。它只会在依赖项 deps 改变时才重新计算 createFn 返回的值。主要用于：
- 缓存昂贵计算的结果，避免每次渲染都重新计算。
- 当需要将一个计算得到的复杂对象或数组作为 props 传递给子组件时，确保引用稳定。

何时使用？

场景驱动： 当你遇到实际的性能问题，并且通过分析发现是由于函数实例变化或昂贵计算导致的子组件重渲染时，才考虑使用它们。
React.memo 的好搭档： useCallback 通常与 React.memo 配合使用，优化子组件渲染。
避免不必要的依赖项： 确保依赖项数组完整且最小。错误的依赖项会导致函数/值没有按预期更新（依赖项过少）或没有起到优化效果（依赖项过多或不稳定）。

javascript 复制代码

javascript复制代码
import React, { useState, useMemo, useCallback } from 'react';

// 假设这是一个经过优化的子组件
const HeavyCalculationComponent = React.memo(({ data, onClick }) => {
  console.log('HeavyCalculationComponent rendering...');
  // 假设这里有复杂的计算或渲染逻辑
  return <button onClick={onClick}>Data Length: {data.length}</button>;
});

function ParentComponent() {
  const [list, setList] = useState([1, 2, 3]);
  const [filter, setFilter] = useState(''); // 假设有个筛选条件

  // 只有当 list 或 filter 变化时，才重新计算 filteredList
  const filteredList = useMemo(() => {
    console.log('Calculating filteredList...');
    return list.filter(item => item.toString().includes(filter));
    // 假设这是个昂贵的计算
  }, [list, filter]);

  // 只有当需要更新 list 时，这个函数实例才应该改变 (这里用空数组表示它不依赖外部变量)
  // 如果 handleAdd 依赖了某个 state 或 prop，需要加入依赖数组
  const handleAdd = useCallback(() => {
    console.log('Creating handleAdd function instance...');
    setList(prevList => [...prevList, prevList.length + 1]);
  }, []); // 注意：如果 handleAdd 内部逻辑依赖了其他 state/prop，需要加入依赖

  return (
    <div>
      <input
        type="text"
        placeholder="Filter list"
        value={filter}
        onChange={e => setFilter(e.target.value)}
      />
      <button onClick={() => setList(prev => [...prev])}>Force Re-render Parent</button>
      {/*
        如果不用 useMemo，每次父组件渲染 filteredList 都是新数组引用
        如果不用 useCallback，每次父组件渲染 handleAdd 都是新函数引用
        这会导致 HeavyCalculationComponent 即使 props 内容没变，也会因为引用变化而重渲染
      */}
      <HeavyCalculationComponent data={filteredList} onClick={handleAdd} />
    </div>
  );
}

注意： 在上面的 handleAdd 示例中，如果它需要访问 filter 状态，则需要将 filter 添加到 useCallback 的依赖项数组中，否则它会捕获到旧的 filter 值（闭包陷阱）。

拥抱自定义 Hooks

自定义 Hooks 是 React Hooks 最强大的特性之一，它允许你将组件逻辑提取到可重用的函数中。

为什么要自己写 Hook？

逻辑复用： 当你在多个组件中发现重复的状态逻辑或副作用处理时（比如数据获取、表单处理、事件监听等），就是创建自定义 Hook 的好时机。
关注点分离： 将复杂的逻辑封装在自定义 Hook 中，可以让你的组件代码更简洁，更专注于 UI 渲染。
更好的可测试性： 自定义 Hook 本质上是普通函数，可以脱离 UI 进行独立的测试。

自定义 Hook 案例：`useFetch`

这是一个非常常见的自定义 Hook，用于封装异步数据获取的逻辑。

需求：

接收一个 URL 作为参数。
管理数据 (data)、加载状态 (loading) 和错误状态 (error)。
在 URL 变化时重新获取数据。

实现 (useFetch.js):

scss 复制代码

javascript复制代码
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 () => {
      setLoading(true); // 开始加载
      setError(null); // 重置错误状态
      setData(null); // 重置数据（可选，取决于你的需求）
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false); // 加载结束
      }
    };

    if (url) {
      fetchData();
    } else {
      // 如果 url 为空，则重置状态
      setData(null);
      setLoading(false);
      setError(null);
    }

    // 注意：这里没有清理函数，因为 fetch 本身是原子的。
    // 如果是 WebSocket 或其他需要清理的订阅，需要添加清理逻辑。

  }, [url]); // 依赖项是 url，url 变化时重新执行 effect

  return { data, loading, error }; // 返回状态
}

export default useFetch;

在组件中使用:

javascript 复制代码

javascript复制代码
import React, { useState } from 'react';
import useFetch from './useFetch'; // 引入自定义 Hook

function UserData({ userId }) {
  const apiUrl = userId ? `https://jsonplaceholder.typicode.com/users/${userId}` : null;
  const { data: user, loading, error } = useFetch(apiUrl);

  if (loading) return <p>Loading user data...</p>;
  if (error) return <p>Error loading user: {error.message}</p>;
  if (!user) return <p>Please select a user ID.</p>; // 处理 url 为 null 的情况

  return (
    <div>
      <h3>User Details</h3>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  );
}

function App() {
  const [selectedUserId, setSelectedUserId] = useState(1);

  return (
    <div>
      <h1>User Fetcher</h1>
      <select value={selectedUserId} onChange={e => setSelectedUserId(Number(e.target.value))}>
        {[1, 2, 3, 4, 5].map(id => (
          <option key={id} value={id}>User {id}</option>
        ))}
      </select>
      <UserData userId={selectedUserId} />
    </div>
  );
}

export default App;

这个 useFetch 极大地简化了 UserData 组件的逻辑，使其只关注如何展示数据。类似的，你可以创建 useLocalStorage, useDebounce, useFormInput 等各种实用的自定义 Hooks。

避开常见陷阱

使用 Hooks 时，有几个常见的"坑"需要注意：

`useEffect` 依赖陷阱

这是最常见的错误之一。

遗漏依赖项： 导致 useEffect 没有在依赖的值更新时重新执行，使用了陈旧 (stale) 的 state 或 props，引发难以察觉的 bug。
包含不必要的依赖项： 特别是对象或函数（如果它们在每次渲染时都重新创建），会导致 useEffect 频繁执行，甚至死循环。

解决方案：

诚实地列出所有依赖项： useEffect 内部用到的所有组件作用域中的变量（props, state, context 值, 甚至函数）都应该出现在依赖项数组中。
使用 ESLint 插件： eslint-plugin-react-hooks 是你的好帮手，它能自动检测并警告依赖项问题。务必开启它！
移除不必要的依赖： 如果某个值不应该触发 effect 更新，尝试将其移出 useEffect，或者使用 useRef 存储，或者使用 useState 的函数式更新。
稳定化依赖项： 对于函数，使用 useCallback；对于对象或数组，使用 useMemo 或 useState + 不可变更新来确保它们的引用稳定性（如果它们确实是 effect 的依赖）。

闭包陷阱 (Stale Closure)

JavaScript 的闭包特性在 Hooks 中，尤其是在 useEffect、useCallback 或事件处理函数内部，可能会捕获到旧的 state 或 props 值。

javascript 复制代码

javascript复制代码
import React, { useState, useEffect, useCallback } from 'react';

function StaleClosureExample() {
  const [count, setCount] = useState(0);

  // 错误示例：useEffect 的闭包捕获了初始的 count (0)
  // useEffect(() => {
  //   const intervalId = setInterval(() => {
  //     console.log(`Count is: ${count}`); // 永远打印 0
  //     // setCount(count + 1); // 这也会基于旧的 count (0) -> 1 -> 1 -> 1...
  //   }, 2000);
  //   return () => clearInterval(intervalId);
  // }, []); // 空依赖数组导致 count 不更新

  // 正确方法 1：将 count 加入依赖项
  // useEffect(() => {
  //   console.log('Effect runs due to count change:', count);
  //   const intervalId = setInterval(() => {
  //     console.log(`Count is: ${count}`); // 打印当前 count
  //     setCount(count + 1); // 这样可以，但每次 count 变都会清理和重建 interval
  //   }, 2000);
  //   return () => {
  //      console.log('Clearing interval for count:', count);
  //      clearInterval(intervalId);
  //   }
  // }, [count]);

  // 正确方法 2：使用函数式更新 (推荐用于 interval/timeout)
  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('Updating count...');
      setCount(prevCount => prevCount + 1); // 无需依赖 count，总是基于最新状态更新
    }, 2000);
    return () => clearInterval(intervalId);
  }, []); // 依赖项为空，interval 只设置一次

  // 另一个场景：事件处理器中的 Stale Closure
  const handleClick = () => {
    // 假设这个函数传递给了子组件，并用 useCallback 包裹但没加依赖
    console.log('Button clicked. Current count:', count); // 可能打印旧的 count
  };

  // 正确做法：如果依赖 count，加入依赖
  const memoizedHandleClick = useCallback(() => {
     console.log('Button clicked. Current count:', count);
  }, [count]); // 现在能获取最新的 count

  // 或者使用 useRef (如果不想因为 count 变化而重新创建函数)
  const countRef = useRef(count);
  useEffect(() => {
    countRef.current = count; // 每次 count 更新时，更新 ref
  }, [count]);

  const handleClickWithRef = useCallback(() => {
    console.log('Button clicked via Ref. Current count:', countRef.current);
  }, []); // 无需依赖 count


  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Log Count (Potentially Stale)</button>
      <button onClick={memoizedHandleClick}>Log Count (Memoized with Dep)</button>
      <button onClick={handleClickWithRef}>Log Count (Using Ref)</button>
    </div>
  );
}

export default StaleClosureExample;

解决方案：

正确设置依赖项： 确保 useEffect, useCallback, useMemo 的依赖项包含了所有需要获取最新值的变量。
使用函数式更新： 对于 useState 的更新，如果新状态依赖旧状态，优先使用 setX(prevX => ...)。
使用 useRef： 如果你需要在回调函数（尤其是那些不希望随依赖变化而重新创建的，如 useEffect 的清理函数或仅挂载时运行的 effect 中的异步回调）中访问最新的 state 或 props，但又不想将它们加入依赖项，可以使用 useRef 来保存一个指向最新值的引用。

性能优化的"度"：避免过度优化

useCallback 和 useMemo 是有成本的（需要存储和比较依赖项）。不要过早优化 或盲目优化。

原则： 先让代码工作，保持简洁。只有当遇到实际的性能瓶颈 时，才通过性能分析工具（如 React DevTools Profiler）定位问题，然后针对性地使用 useCallback 或 useMemo。
并非所有函数/值都需要记忆化： 如果一个函数或值的计算成本不高，或者它没有作为 prop 传递给 React.memo 组件，或者不是其他 Hook 的依赖项，那么使用 useCallback 或 useMemo 可能带来的开销比收益更大。
简单场景优先： 对于简单的组件和交互，通常不需要这些优化。

总结与建议

React Hooks 提供了一种更现代、更强大的方式来构建 React 应用。通过掌握核心 Hooks 的实用技巧，拥抱自定义 Hooks 的力量，并注意避开常见的陷阱，你可以显著提升代码质量、可维护性和开发效率。

关键实践点回顾：

useState: 使用函数式更新处理依赖前值的状态，坚持不可变性原则。
useEffect: 精确管理依赖项，别忘了必要的清理函数。
useCallback/useMemo: 用于解决实际性能问题，与 React.memo 配合效果更佳，注意依赖项和优化成本。
自定义 Hooks: 封装、复用逻辑的利器，让组件更清爽。
警惕陷阱: 依赖项、闭包问题是重灾区，善用 ESLint 插件。

最重要的是，多实践，多思考。在你的项目中尝试应用这些技巧，封装你自己的自定义 Hooks，逐步加深理解。当你能自如地运用 Hooks 解决各种问题时，你会发现函数式组件开发的乐趣！

欢迎在评论区分享你使用 Hooks 的心得、遇到的问题或你觉得实用的自定义 Hooks！

精通 React Hooks：从核心技巧到自定义实践

引言

核心 Hooks 的实用技巧

useState：不仅仅是状态

useEffect：驾驭副作用

useCallback vs useMemo：性能优化的双刃剑

拥抱自定义 Hooks

为什么要自己写 Hook？

自定义 Hook 案例：useFetch

避开常见陷阱

useEffect 依赖陷阱

闭包陷阱 (Stale Closure)

性能优化的"度"：避免过度优化

总结与建议

`useState`：不仅仅是状态

`useEffect`：驾驭副作用

`useCallback` vs `useMemo`：性能优化的双刃剑

自定义 Hook 案例：`useFetch`

`useEffect` 依赖陷阱