Hooks 之 useEffect

前端

2024-01-26 22:10:37

写代码，离不开效果。
好的效果，离不开好的副作用。

在 React 中，想要达成一个好的副作用，离不开 useEffect。

一、useEffect

useEffect 是一个 React Hook，它允许我们在函数组件中执行副作用操作。
副作用操作是指那些会影响组件状态或对 DOM 进行更改的操作。

useEffect 函数接受两个参数：一个回调函数和一个依赖项数组。
回调函数将在组件挂载后立即执行，并在每次组件更新后重新执行。
依赖项数组是一个数组，其中包含了那些在组件更新时需要重新执行回调函数的变量。

如果我们不提供依赖项数组，那么回调函数将在每次组件更新后重新执行。
这可能导致不必要的重新渲染，从而降低性能。

二、使用场景

useEffect 可以用来实现各种各样的效果，比如：

数据获取：可以使用 useEffect 来在组件挂载后立即获取数据。
事件监听：可以使用 useEffect 来在组件挂载后添加事件监听器，并在组件卸载后移除事件监听器。
定时器：可以使用 useEffect 来创建定时器，并在组件卸载后清除定时器。
动画：可以使用 useEffect 来创建动画，并在组件卸载后停止动画。

三、代码示例

import React, { useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);

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

  return <div>{data ? data.message : "Loading..."}</div>;
};

export default MyComponent;