React之Effect详解

海燕技术栈发表于 10月以前 | 总阅读数：842 次

在React中，Effect是一种用于处理副作用的机制，它允许我们在组件生命周期中执行诸如数据获取、订阅事件、手动操作DOM等副作用操作。Effect钩子被设计用于在React函数组件中进行副作用的管理，取代了类组件中的生命周期方法。通过Effect，我们可以更清晰地组织组件的逻辑，并确保副作用的正确执行。在本文中，我们将详细介绍React中的Effect，包括使用方法、常见用例和注意事项。

1. 基本用法

Effect钩子是React 16.8引入的一个新特性，它是React函数组件的一部分，并且可以多次使用。Effect钩子是一个函数，它在每次组件渲染时都会被调用。Effect钩子接受两个参数：一个函数（副作用函数）和一个依赖数组（可选）。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 在此处执行副作用操作
    console.log('Effect executed');
  }, []); // 依赖数组为空表示只在组件挂载时执行

  return <div>My Component</div>;
}

在这个例子中，我们使用了useEffect钩子来执行一个简单的副作用操作，即打印一条日志。副作用函数会在组件挂载后立即执行，因为我们将一个空的依赖数组传递给了useEffect，这意味着副作用函数不依赖于任何组件的props或state。

2. 响应式Effect的生命周期

在React中，Effect钩子的生命周期由其依赖项决定。当Effect的依赖项发生变化时，Effect会被调用。通常，Effect在组件首次渲染时被调用，然后在组件每次重新渲染时，只有在Effect的依赖项发生变化时才会被调用。

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

function MyComponent({ count }) {
  useEffect(() => {
    console.log('Effect mounted');
    return () => {
      console.log('Effect unmounted');
    };
  }, [count]);

  return <div>{count}</div>;
}

3. 依赖管理

Effect钩子的第二个参数是一个依赖数组，它用于指定Effect钩子的依赖项。当依赖项发生变化时，Effect钩子会重新执行。如果依赖数组为空，则Effect钩子只会在组件挂载和卸载时执行，类似于类组件中的componentDidMount和componentWillUnmount。

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

function MyComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // 在userId发生变化时重新加载用户数据
    fetchUserData(userId);
  }, [userId]);

  const fetchUserData = async (userId) => {
    const response = await fetch(`https://api.example.com/user/${userId}`);
    const data = await response.json();
    setUserData(data);
  };

  return <div>{userData ? userData.name : 'Loading...'}</div>;
}

在这个例子中，我们使用了useEffect钩子来根据userId加载用户数据。当userId发生变化时，Effect钩子会重新执行fetchUserData函数，从而加载新的用户数据。

4. 处理副作用

Effect钩子可以用于处理各种副作用，包括数据获取、订阅事件、手动操作DOM等。以下是一些常见的用例：

数据获取： 使用Effect钩子来发送网络请求并处理返回的数据。
订阅事件： 使用Effect钩子来订阅外部事件，如鼠标移动、键盘按下等。
手动操作DOM： 使用Effect钩子来执行DOM操作，如滚动到特定位置、添加/移除DOM元素等。
清理副作用： 使用Effect钩子的返回函数来清理副作用，如取消订阅、清除定时器等。


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

function MouseTracker() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

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

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return (
    <div>
      Mouse position: {position.x}, {position.y}
    </div>
  );
}

在这个例子中，我们使用了useEffect钩子来订阅鼠标移动事件，并在每次事件触发时更新鼠标位置。在组件卸载时，我们通过返回一个清理函数来取消订阅鼠标移动事件，以避免内存泄漏。

5. 事件处理与Effect的分离

在React中，我们通常希望将事件处理逻辑与副作用逻辑分开，以提高代码的可读性和维护性。为了实现这一点，我们可以将事件处理逻辑定义为单独的函数，并在Effect中使用它。

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

function MyComponent({ fetchData }) {
  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return <div>Component Content</div>;
}

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

  const fetchData = () => {
    // 发送网络请求并更新数据
    setData(newData);
  };

  return (
    <div>
      <MyComponent fetchData={fetchData} />
    </div>
  );
}

在这个例子中，fetchData函数负责发送网络请求并更新数据，而MyComponent组件则负责渲染内容。通过将数据获取逻辑从MyComponent中提取出来并作为fetchData函数传递给它，我们实现了事件处理逻辑与Effect的分离。