彻底掌握 React 中的 useEffect：解锁四大用法，进阶开发之路！

前端

2024-01-14 13:04:21

useEffect：React 中强大的钩子

在 React 的世界中，useEffect 钩子是一个必不可少的工具，它允许你轻松地执行各种各样的任务，从而增强你的应用程序的响应性和效率。了解 useEffect 的用法可以帮助你驾驭组件生命周期的细微差别，解锁更多可能性。

useEffect 的四大用法

useEffect 主要有四种主要用法：

获取数据： 从服务器获取数据，并在获取后更新组件状态。
设置计时器： 在指定的时间间隔后执行某些操作。
更新 DOM： 直接更新 DOM 元素，而无需使用 ReactDOM.render()。
清理资源： 当组件卸载时，释放资源，例如计时器、网络请求或事件监听器。

代码示例：

获取数据：

import { useState, useEffect } from 'react';

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

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

  return (
    <ul>
      {data.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
};

设置计时器：

import { useState, useEffect } from 'react';

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

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

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

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

更新 DOM：

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

const DragAndDrop = () => {
  const ref = useRef(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const element = ref.current;

    const onMouseMove = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };

    element.addEventListener('mousemove', onMouseMove);

    return () => {
      element.removeEventListener('mousemove', onMouseMove);
    };
  }, []);

  return (
    <div
      ref={ref}
      style={{ position: 'absolute', left: position.x, top: position.y }}
    >
      Drag me!
    </div>
  );
};

清理资源：

import { useEffect } from 'react';

const Cleanup = () => {
  useEffect(() => {
    const timer = setTimeout(() => {
      console.log('This message will not be logged');
    }, 1000);

    return () => {
      clearTimeout(timer);
    };
  });

  return (
    <div>
      <h1>This component will be unmounted soon</h1>
    </div>
  );
};