了解 React 中的 useEffect：从零到英雄

React 已成为构建动态用户界面最流行的 JavaScript 库之一。 React 中最重要的钩子之一是 useEffect，它允许开发人员管理功能组件中的副作用。副作用包括获取数据、设置订阅或手动操作 DOM 等操作。在本博客中，我们将深入探讨 useEffect 是什么、它是如何工作的，并提供分步示例以更好地理解。

什么是useEffect？

在React中，useEffect是一个内置的钩子，允许你在函数组件中执行副作用。顾名思义，副作用是影响函数外部某些内容的操作，例如 API 调用、计时器、日志记录或更新 DOM。

在 React 16.8 中引入 hooks 之前，您必须使用类组件和生命周期方法（例如 componentDidMount、componentDidUpdate 和 componentWillUnmount）来处理副作用。现在，通过 useEffect，这些生命周期事件被组合成功能组件的单个函数。

为什么选择useEffect？

useEffect 是一个强大的 hook，用于管理 React 中的副作用，原因如下：

1. 代码简化：它消除了对基于类的组件和生命周期方法的需要，使您可以编写更干净、基于功能的代码。
2. 集中副作用：您可以在一个地方管理所有副作用，例如获取数据或更新 DOM。
3. 提高可读性：它简化了生命周期事件的管理方式，使代码更具可读性且更简单。
4. 灵活性： 通过 useEffect，您可以更好地控制副作用的执行时间和频率，因为您可以定义确定效果何时运行的依赖项。

它是如何运作的？

useEffect 钩子接受两个参数：

1. 效果函数： 该函数包含副作用逻辑，例如获取数据或设置订阅。
2. 依赖数组（可选）： 确定何时重新运行效果的值数组。如果依赖数组中的任何值发生变化，则效果将再次执行。如果省略此数组，效果将在每次渲染后运行。

这是基本结构：

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

例子：

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

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

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return 
{data ? data.title : 'Loading...'}
;
}

在此示例中，首次渲染组件时从 API 获取数据，并将结果显示在 UI 中。由于我们传递了一个空的依赖数组，因此该效果仅在第一次渲染后运行一次。

控制 useEffect 中的副作用

通过控制 useEffect 运行的时间，我们可以优化性能并确保副作用在正确的时间发生。

无需清理的效果

并非所有效果都需要清理。仅当您需要在执行效果后删除或重置某些内容时才需要清理，例如清除计时器或取消订阅数据流。

例如，这是一个不需要清理的场景：

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

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

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    

      
{count}
       setCount(count   1)}>Increment
    
  );
}

在这种情况下，每次计数状态更改时都会运行效果。由于我们不设置订阅或管理外部资源，因此不需要清理。

清理效果

如果您的效果涉及设置订阅或计时器，您可能需要在效果后进行清理。例如，想象一个场景，我们要设置一个计时器：

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

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime   1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return 
{time} seconds have passed
;
}

这是发生的事情：

1. setInterval 函数设置一个每秒递增时间的计时器。
2. 清理函数（由useEffect返回）清除组件卸载时的间隔。这可以确保计时器在组件被移除后不会继续运行。

使用效果场景示例

让我们探讨一些 useEffect 特别有用的常见场景。

获取组件挂载数据

在组件安装时获取数据是 useEffect 最常见的用例之一。

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

更新 DOM

您可以在渲染后使用 useEffect 手动操作 DOM，不过应该谨慎执行此操作，因为 React 可以有效地管理 DOM。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

组件卸载时的清理

如果您有需要清理的订阅或事件监听器等资源，可以使用 useEffect 中的返回函数来处理。

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

常见问题解答

1.如果我在 useEffect 中省略依赖数组会发生什么？

如果省略依赖项数组，useEffect 将在每次渲染后运行，这可能会导致 API 调用等昂贵副作用的性能问题。

2.我可以只运行一次 useEffect 吗？

是的，传递一个空的依赖数组[]可以确保该效果在组件挂载后只运行一次。

3. useEffect中的清理函数是什么？

清理函数是在组件卸载时或效果再次运行之前撤消效果的一种方法。它对于清理计时器、事件侦听器或订阅很有用。

总之，useEffect 是一个强大而灵活的钩子，可以简化 React 中副作用的管理。通过控制副作用何时运行并在必要时进行清理，您可以优化组件并避免不必要的重新渲染或内存泄漏。尝试上面的例子来掌握副作用管理的艺术！