React useEffect：彻底解析

前端

2023-12-06 05:26:00

React的 useEffect 是一个用于管理副作用的钩子。它允许你在函数组件中执行副作用，如对DOM进行更改、发起网络请求或设置定时器。

useEffect有三个参数：

effectCallback： 一个函数，包含你想要在组件挂载后执行的副作用逻辑。
inputArray： 一个数组，包含 useEffect 应该监视的状态变量或属性。当任何一个值改变时，useEffect 将被再次调用。
dependenciesArray： 一个可选的数组，包含useEffect不应该监视的状态变量或属性。当这些值改变时，useEffect 不会被再次调用。

何时使用useEffect？

你应该在以下情况下使用useEffect：

当你需要对DOM进行更改。
当你需要发起网络请求。
当你需要设置定时器。
当你需要在组件卸载时清理一些资源。

useEffect的一些常见示例

以下是一些 useEffect 的常见示例：

在组件挂载后设置一个定时器：

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const timer = setTimeout(() => {
      console.log("Hello world!");
    }, 1000);

    // 在组件卸载时清理定时器
    return () => {
      clearTimeout(timer);
    };
  }, []);

  return (
    <div>
      <h1>Hello world!</h1>
    </div>
  );
}

export default App;

在组件挂载后发起一个网络请求：

import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://example.com/api/data")
      .then((res) => res.json())
      .then((data) => {
        setData(data);
      });
  }, []);

  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
}

export default App;

在组件卸载时清理一些资源：

import { useEffect } from "react";

function App() {
  useEffect(() => {
    // 创建一个资源
    const resource = new Resource();

    // 在组件卸载时释放资源
    return () => {
      resource.release();
    };
  }, []);

  return (
    <div>
      <h1>Hello world!</h1>
    </div>
  );
}

export default App;