React Hooks 指南：useState 与 useEffect 的用法与技巧

Dream耀
0 阅读5分钟

React Hooks 编程指南：从基础到实践

React Hooks 自 2018 年推出以来，彻底改变了 React 的开发方式，让函数组件也能拥有状态管理和生命周期等特性。本文将深入浅出地介绍最常用的两个 Hook——useState 和 useEffect，并探讨它们在项目中的实际应用场景。

一、useState：函数式组件的状态管理

1.1 什么是 useState？

useState 是 React 提供的一个 Hook，它允许我们在函数组件中添加局部状态。在 React 16.8 之前，函数组件被称为"无状态组件"，因为它们无法维护自己的状态。useState 的出现打破了这一限制。

javascript

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

1.2 useState 的工作原理

useState 接受一个参数作为初始状态值，返回一个包含两个元素的数组：

  • 第一个元素是当前状态值
  • 第二个元素是更新状态的函数

这种数组解构的写法既简洁又符合 JavaScript 的函数式编程风格。

1.3 函数式更新的优势

当新状态依赖于旧状态时，建议使用函数式更新：

javascript

setCount(prevCount => prevCount + 1);

这种方式能确保我们获取到最新的状态值，避免闭包带来的问题。

1.4 为什么 useState 如此重要？

  1. 简化组件结构：不再需要为了状态而将函数组件改为类组件
  2. 逻辑复用：配合自定义 Hook 可以轻松复用状态逻辑
  3. 性能优化：React 会对 useState 的更新做优化处理
  4. 函数式编程：符合现代 JavaScript 的开发趋势

二、useEffect：处理副作用的利器

2.1 副作用的概念

在 React 中，副作用是指那些与组件渲染无关的操作，比如：

  • 数据获取
  • 订阅事件
  • 手动修改 DOM
  • 设置定时器

这些操作可能会影响其他组件或在渲染周期之外执行，因此需要特殊处理。

2.2 useEffect 的基本用法

javascript

import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 这里的代码会在组件渲染后执行
    fetchData().then(result => setData(result));
  }, []); // 空数组表示只在组件挂载时执行一次

  return <div>{data ? data : 'Loading...'}</div>;
}

2.3 useEffect 的依赖项

useEffect 的第二个参数是一个依赖项数组，它决定了 effect 何时重新执行：

  1. 不提供依赖项：每次渲染后都执行
  2. 空数组 [] ：只在组件挂载和卸载时执行
  3. 有值的数组 [props, state] ：当这些值变化时执行

2.4 清理副作用

某些副作用需要清理，比如订阅和定时器：

javascript

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Timer tick');
  }, 1000);

  return () => {
    clearInterval(timer); // 清理定时器
  };
}, []);

清理函数在组件卸载时执行，也会在下一次 effect 执行前运行。

三、组件生命周期与 Hooks

3.1 类组件 vs 函数组件生命周期

在类组件中，我们熟悉的生命周期方法如 componentDidMount、componentDidUpdate 和 componentWillUnmount。在函数组件中，这些生命周期概念可以通过 useEffect 来实现：

类组件生命周期Hook 等效写法
componentDidMountuseEffect(fn, [])
componentDidUpdateuseEffect(fn, [deps])
componentWillUnmountuseEffect(() => { return fn }, [])

3.2 挂载阶段 (Mounted)

只在组件首次渲染后执行：

javascript

useEffect(() => {
  console.log('组件已挂载');
}, []); // 空依赖数组

3.3 更新阶段 (Updated)

当特定状态或属性变化时执行：

javascript

useEffect(() => {
  console.log('count 已更新:', count);
}, [count]); // count 作为依赖项

3.4 卸载阶段 (Unmounted)

清理副作用防止内存泄漏：

javascript

useEffect(() => {
  const subscription = props.source.subscribe();
  
  return () => {
    subscription.unsubscribe(); // 清理订阅
  };
}, [props.source]);

四、数据获取的最佳实践

4.1 为什么要在 useEffect 中请求数据？

  1. 避免阻塞渲染：数据获取是异步操作，放在 useEffect 中不会阻塞组件的初始渲染
  2. 明确职责：将副作用与渲染逻辑分离，代码更清晰
  3. 性能考虑：可以精确控制数据获取的时机和频率

4.2 基本数据获取模式

javascript

useEffect(() => {
  let isMounted = true;
  
  const fetchData = async () => {
    try {
      const result = await api.get('/data');
      if (isMounted) {
        setData(result);
      }
    } catch (error) {
      if (isMounted) {
        setError(error);
      }
    }
  };
  
  fetchData();
  
  return () => {
    isMounted = false; // 组件卸载时取消设置状态
  };
}, []); // 空数组表示只在挂载时获取一次

4.3 处理竞态条件

在快速切换的组件中，可能会出现前一个请求比后一个请求返回更晚的情况，导致数据显示错误。解决方法：

javascript

useEffect(() => {
  let didCancel = false;
  
  const fetchData = async () => {
    const result = await fetch(`/api/items/${itemId}`);
    if (!didCancel) {
      setData(result);
    }
  };
  
  fetchData();
  
  return () => {
    didCancel = true;
  };
}, [itemId]); // 当 itemId 变化时重新获取

五、为什么 useEffect 不能直接使用 async 函数？

5.1 常见错误写法

javascript

// 错误写法！
useEffect(async () => {
  const data = await fetchData();
  setData(data);
}, []);

5.2 原因分析

  1. 返回类型冲突：async 函数隐式返回 Promise，而 useEffect 应该返回清理函数或 undefined
  2. 执行顺序问题：React 无法正确处理 async 函数的执行流程
  3. 错误处理困难：直接在 useEffect 中使用 async/await 会使错误处理变得复杂

5.3 正确解决方案

  1. 在 effect 内部声明 async 函数

javascript

useEffect(() => {
  const fetchData = async () => {
    const result = await fetch('/api/data');
    setData(result);
  };
  
  fetchData();
}, []);
  1. 使用 IIFE (立即调用函数表达式)

javascript

useEffect(() => {
  (async () => {
    const result = await fetch('/api/data');
    setData(result);
  })();
}, []);
  1. 提取到单独函数

javascript

const fetchData = async () => {
  const result = await fetch('/api/data');
  return result;
};

function MyComponent() {
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  
  // ...
}

六、实战技巧与常见问题

6.1 多个状态的管理

当有多个相关状态时，可以考虑使用 useReducer：

javascript

const [state, dispatch] = useReducer(reducer, initialState);

6.2 性能优化

  1. 避免不必要的 effect 执行：精确指定依赖项
  2. 使用 useCallback 和 useMemo：避免子组件不必要的重渲染
  3. 拆分复杂 effect：将不相关的逻辑拆分到多个 effect 中

6.3 自定义 Hook

将可复用的逻辑提取为自定义 Hook：

javascript

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } finally {
        setLoading(false);
      }
    };
    
    fetchData();
  }, [url]);
  
  return { data, loading };
}

七、总结

React Hooks 特别是 useState 和 useEffect，为函数组件带来了强大的能力。通过本文的学习，你应该能够：

  1. 理解 useState 的状态管理机制
  2. 掌握 useEffect 处理副作用的正确方式
  3. 熟悉组件生命周期的 Hook 实现
  4. 了解数据获取的最佳实践
  5. 避免常见的错误用法

Hooks 不仅简化了 React 代码，还促进了更好的代码组织和逻辑复用。随着 React 生态的发展，Hooks 已经成为现代 React 开发的标配，值得每个 React 开发者深入掌握。

avatar
文章
阅读
粉丝