React useEffect hook 使用指南：让您的 React 应用程序更加动态

在构建交互式且动态的 React 应用程序时，您需要一种方法来在组件生命周期的不同阶段执行特定的操作。这就是 useEffect hook 的用武之地。useEffect 允许您在组件挂载、卸载或状态更新时运行代码。

useEffect 接受两个参数：

1. 一个函数，包含您要在组件生命周期中运行的代码。
2. 一个数组，包含 useEffect 应在其状态更改时重新运行的变量。

以下是 useEffect 的基本示例：

import React, { useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('useEffect called');
  }, [count]);

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

export default MyComponent;

在上面的示例中，useEffect 在组件挂载时运行，因为没有传入第二个参数。每当 count 状态变量更新时，useEffect 也会再次运行。

您可以使用 useEffect 来执行各种操作，例如：

• 在组件挂载时获取数据
• 在组件卸载时清理资源
• 在状态更新时更新 DOM
• 响应用户交互

useEffect 是一个非常强大的 hook，可以极大地提高 React 应用程序的灵活性。通过学习如何使用 useEffect，您可以构建出更具响应性和动态性的应用程序。

以下是一些使用 useEffect 的其他示例：

• 在组件挂载时设置计时器：

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

const MyComponent = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <h1>Seconds: {seconds}</h1>
    </div>
  );
};

export default MyComponent;

• 在组件卸载时清理计时器：

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

const MyComponent = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <h1>Seconds: {seconds}</h1>
    </div>
  );
};

export default MyComponent;

• 在状态更新时更新 DOM：

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

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.getElementById('count').innerHTML = count;
  }, [count]);

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

export default MyComponent;

• 响应用户交互：

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

const MyComponent = () => {
  const [isHovering, setIsHovering] = useState(false);

  useEffect(() => {
    const element = document.getElementById('my-element');

    element.addEventListener('mouseover', () => {
      setIsHovering(true);
    });

    element.addEventListener('mouseout', () => {
      setIsHovering(false);
    });

    return () => {
      element.removeEventListener('mouseover', () => {
        setIsHovering(true);
      });

      element.removeEventListener('mouseout', () => {
        setIsHovering(false);
      });
    };
  }, []);

  return (
    <div id="my-element">
      {isHovering ? 'Hovering' : 'Not hovering'}
    </div>
  );
};

export default MyComponent;

useEffect 是一个非常强大的 hook，可以极大地提高 React 应用程序的灵活性。通过学习如何使用 useEffect，您可以构建出更具响应性和动态性的应用程序。