【React】useEffect 钩子详解

React中的useEffect钩子详解

useEffect是React中用于处理副作用的重要钩子。副作用是指在函数组件中会影响其他组件或系统状态的操作，如数据获取、订阅、手动操作DOM等。useEffect使我们能够在函数组件中处理这些副作用，从而使组件更具功能性与灵活性。

1. 基础用法

useEffect的基本用法是接收两个参数：一个回调函数和一个依赖数组。回调函数将在组件渲染后执行，依赖数组则用于指定哪些状态或属性变化时需要重新执行这个回调函数。

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

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

  useEffect(() => {
    // 副作用操作
    document.title = `你点击了 ${count} 次`;

    // 可选的清理操作
    return () => {
      console.log(`清理操作: count 为 ${count}`);
    };
  }, [count]); // 只有当 count 改变时才会重新执行

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

在上述代码中，useEffect会在每次渲染后执行，且仅当count值变化时，回调函数中的代码才会被执行。清理函数会在组件卸载时或者下次执行useEffect之前运行。

2. 依赖数组的使用

依赖数组的存在使得我们能够控制useEffect的运行时机。如果省略依赖数组，useEffect将在每次渲染时都执行；如果传入一个空数组[]，则只会在组件首次挂载时执行一次。

useEffect(() => {
  console.log('组件挂载时执行');
}, []); // 只在组件挂载时执行

如果我们希望在某些状态变化时执行一个副作用，可以将它们放入依赖数组中。比如，监听网络请求的数据变化：

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // 可选的清理操作
    return () => {
      setData(null); // 清理数据
    };
  }, []); // 只在组件挂载时发起请求

  return (
    <div>
      {data ? <p>数据: {JSON.stringify(data)}</p> : <p>加载中...</p>}
    </div>
  );
}

3. 多个useEffect

在一个组件中，我们可以使用多个useEffect以分别处理不同的副作用。这样做的好处在于可以将每个副作用逻辑分隔开，增强可读性和可维护性。

function MultipleEffects() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  useEffect(() => {
    console.log(`你点击了 ${count} 次`);
  }, [count]);

  useEffect(() => {
    console.log(`当前名字是 ${name}`);
  }, [name]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>点击我</button>
      <input 
        type="text" 
        value={name} 
        onChange={e => setName(e.target.value)} 
        placeholder="输入名字" 
      />
    </div>
  );
}

4. 清理副作用

在某些情况下，副作用可能需要清理。例如，我们可能需要在组件卸载时取消订阅或清除计时器。可以通过回调函数的返回值来实现这一功能。

useEffect(() => {
  const timer = setInterval(() => {
    console.log('每秒执行一次');
  }, 1000);

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

结论

useEffect是React中处理副作用的强大工具。理解其工作原理与用法，可以帮助开发者编写出更高效和可维护的代码。无论是数据请求、事件监听还是手动操作DOM，useEffect都提供了一种优雅的方式来处理这些副作用。通过合理使用依赖数组和清理函数，我们可以优化性能并防止内存泄漏。