react useEffect 作用-A Site

React 的 useEffect 钩子函数的作用是：

处理副作用：在函数组件中，无法使用类似于生命周期方法的方式来处理副作用，如设置 timer、发送网络请求、更新 DOM 等。useEffect 提供了一种方式来处理这些副作用。
模拟生命周期方法：useEffect 可以模拟类组件的生命周期方法，如 componentDidMount、componentDidUpdate、componentWillUnmount 等。
** cleanup**：useEffect 返回一个函数，用于清理副作用，这可以防止内存泄露。

useEffect 的常见用法包括：

获取数据：在组件挂载时获取数据，例如从 API 获取数据。
设置 timer：在组件挂载时设置 timer，例如每隔一段时间执行某个任务。
更新 DOM：在组件挂载时更新 DOM，例如设置焦点或滚动到某个位置。
监听事件：在组件挂载时监听事件，例如监听窗口 resize 事件。

useEffect 的基本语法是：

import { useState, useEffect } from 'react';

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

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

    // 返回一个函数，用于清理副作用
    return () => {
      console.log('组件卸载');
    };
  }, [count]); // 依赖项

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

在上面的示例中，useEffect 会在组件挂载时执行，并返回一个函数，用于清理副作用。在依赖项数组中，我们指定了 count 状态变量，当 count 变化时，useEffect 会重新执行。

以下是一个使用 useEffect 获取图片资源的示例：

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

function ImageComponent() {
  const [image, setImage] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchImage = async () => {
      setLoading(true);
      try {
        const response = await fetch('https://example.com/image.jpg');
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        setImage(url);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchImage();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <img src={image} alt='Image' />;
}

在上面的示例中，我们使用 useState 创建了三个状态变量：

image: 存储获取的图片资源的 URL
loading: 存储是否正在加载图片的状态
error: 存储获取图片时出现的错误

然后，我们使用 useEffect 获取图片资源。在 useEffect 回调函数中，我们使用 fetch API 获取图片资源，并将其转换为 blob 对象。然后，我们使用 URL.createObjectURL 方法将 blob 对象转换为 URL，并将其设置为 image 状态变量。

在 useEffect 回调函数中，我们还使用 try-catch 语句来捕获获取图片时出现的错误，并将其设置为 error 状态变量。

最后，我们使用条件语句来渲染不同的内容：

如果正在加载图片，则渲染 “Loading…” 文本
如果获取图片时出现错误，则渲染错误信息
如果获取图片成功，则渲染图片

注意，在上面的示例中，我们使用了空数组 [] 作为 useEffect 的依赖项，这意味着 useEffect 只会在组件挂载时执行一次。如果你需要在组件更新时重新获取图片资源，可以将依赖项设置为某个状态变量，例如 [props.id]。

react useEffect 作用

Cookie Notice!