React 的 useEffect 钩子是一个强大的工具，它允许你在组件中执行副作用操作，例如数据获取、订阅或手动更改 DOM。下面是一些关于 useEffect 的高级用法。

基本用法

useEffect 接受两个参数：一个函数和一个依赖数组。这个函数会在组件渲染后执行，并且在依赖数组中列出的变量改变时再次执行。

useEffect(() => {
  // 副作用代码
}, [依赖变量]);

依赖项的注意事项

  • 如果没有提供依赖项数组，该函数将在组件每次渲染后执行，但不会在重新渲染时触发。
  • 如果依赖项数组为空，该函数仅在组件首次渲染后执行一次。

清理函数

useEffect 还可以接受一个清理函数，这个函数会在组件卸载时执行。

useEffect(() => {
  // 副作用代码

  return () => {
    // 清理代码
  };
}, [依赖变量]);

使用多个 useEffect

你可以使用多个 useEffect 来处理不同的副作用。

useEffect(() => {
  // 副作用 1
}, [依赖变量 1]);

useEffect(() => {
  // 副作用 2
}, [依赖变量 2]);

示例

假设我们想要在组件加载时获取数据，并在数据更新时重新获取。

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('/api/data');
    const data = await response.json();
    setData(data);
  };

  fetchData();
}, [setData]);

了解更多关于 React 的信息。

图片示例

React_UseEffect