React--useEffect

useEffect

useEffect 是 React 中的一个 Hook，用于在函数组件中进行副作用操作（如数据获取、订阅、事件监听等）。

语法：

useEffect(effect, dependencies)

使用 useEffect 的步骤如下：

1. 在函数组件中调用 useEffect，并传入一个回调函数作为 effect。这个回调函数将会在组件渲染完成后执行。
2. 可选地，传入一个依赖项数组作为第二个参数。依赖项数组表示什么情况下需要重新运行 effect。如果不传入依赖项数组，则 effect 每次组件重新渲染时都会执行；如果传入一个空数组 []，则 effect 只会在组件挂载和卸载时执行；如果传入依赖项数组，effect 将会在依赖项发生变化时执行。

使用场景：

数据获取、订阅、事件监听等

demo

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

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

  useEffect(() => {
    // 在组件渲染完成后执行的副作用操作
    fetchData();
  }, []);

  const fetchData = async () => {
    // 异步获取数据的逻辑
    const response = await fetch('https://api.example.com/data');
    const json = await response.json();
    setData(json);
  };

  return <div>{data ? <div>Data loaded</div> : <div>Loading...</div>}</div>;
}

可以看到，在上述代码中，我们在组件渲染完成后调用 useEffect，并传入一个空的依赖项数组 []。这意味着 fetchData 函数只会在组件第一次渲染时执行一次。这样可以避免重复获取数据。当依赖项数组中的值发生变化时，useEffect 将会重新运行。

good  luck !