使用 useEffect 的反应示例 - JavaScript

在 React 中，我们想要在组件渲染后执行一些操作（例如：请求数据、添加事件监听器等等），就可以使用 useEffect 钩子函数。

基本语法

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 在这里执行副作用操作
    // 返回一个清理函数
    return () => {
      // 在这里执行清理操作
    }
  }, []); // 依赖项数组
  return (
    <div>Example</div>
  );
}

• 函数作为第一个参数：这个函数将在组件渲染时执行，它是执行有副作用操作的唯一位置。
• 可选的依赖项数组 [...]：当数组中的值发生变化时，函数会再次执行。如果这个数组为空，函数仅在组件渲染时执行一次。
• 函数返回一个清理函数：清理函数可以用来进行清理操作，比如：取消事件监听器、清理定时器等等。

常见使用场景

使用 AJAX 请求数据

当组件渲染时，我们可以使用 useEffect 钩子来执行 AJAX 请求，如下所示：

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

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

  useEffect(() => {
    async function fetchData() {
      const result = await axios('https://jsonplaceholder.typicode.com/todos');
      setData(result.data);
    }
    fetchData();
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

在这个例子中，我们使用了 useState 钩子来在组件中存储 data。然后再使用 useEffect 钩子发送 AJAX 请求并设置状态。

监听事件

当组件销毁时，我们应该清理事件监听器以避免内存泄漏。我们可以使用 useEffect 钩子来添加事件监听器并返回一个清理函数，如下所示：

import { useState, useEffect } from 'react';

function Example() {
  const [windowSize, setWindowSize] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() {
      setWindowSize(window.innerWidth);
    }
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div>Window size: {windowSize}</div>
  );
}

在这个例子中，我们使用 useState 钩子来保存窗口的宽度。然后使用 useEffect 钩子添加一个事件监听器，为 resize 事件设置 handleResize 回调函数，并在组件卸载时清理事件监听器。

订阅数据

当我们订阅数据时，我们应该在组件销毁时取消订阅以避免内存泄漏。我们可以使用 useEffect 钩子来订阅数据并返回一个清理函数，如下所示：

import { useState, useEffect } from 'react';

function Example() {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromStatus(props.friend.id, handleStatusChange);
    };
  }, [props.friend.id]);

  if (isOnline === null) {
    return 'Loading...';
  }
  return (
    <div>Status: {isOnline ? 'Online' : 'Offline'}</div>
  );
}

在这个例子中，我们使用 useState 钩子来保存 isOnline 状态。然后我们使用 useEffect 钩子订阅 props.friend.id。然后在组件销毁时返回一个清理函数。在 useEffect 钩子中声明函数时，我们必须在依赖项数组中传入 props.friend.id，以确保订阅和取消订阅只在 props.friend.id 改变时被调用。

结论

useEffect 钩子可以使得执行有副作用操作变得简单易行。无论是请求数据、添加事件监听器还是订阅数据，useEffect 都是处理这些任务的理想选择。记住在使用 useEffect 钩子时需要遵循以下指导原则：

• 在内部进行订阅操作时，请确保取消订阅。
• 将 AJAX 请求封装在 async 函数中，并确保它们是可取消的。
• 在函数中处理状态，并尽量避免使用类似于实例的方法（例如 this.setState）。
• 如果没有修改可变数据的计划，请确保使用空依赖项数组，以免重复请求数据。