理解与掌控副作用：前端开发（Vue 3 和 React）中的关键环节

在现代前端开发中，副作用（Side Effects）是一个经常被提到的概念。它指的是那些在执行计算或操作时，不仅影响当前函数的输出，还可能对外部世界产生某些影响的操作。常见的副作用包括：数据请求、事件监听、定时器、DOM 操作等。处理副作用是前端开发中非常重要的一部分，尤其是在构建复杂的用户界面时。如何正确启动和清理副作用，成为了开发者必须掌握的关键技能。

本文将通过 Vue 3 和 React 两个流行框架，讲解副作用的处理方法，帮助开发者理解如何在组件中管理副作用，并提供相应的示例代码。

什么是副作用？

副作用是指那些除了返回计算结果之外，还会影响外部世界或应用其他部分的操作。例如：

• API 请求：向服务器发送请求并接收数据。
• 事件订阅：监听用户行为或系统事件。
• 定时器操作：使用 setTimeout 或 setInterval 来执行某些定时任务。
• 直接修改 DOM：例如通过 JavaScript 操控页面元素，改变样式或内容。

副作用通常是开发中必不可少的，但如果管理不当，可能会导致性能问题、内存泄漏、界面不一致等问题。因此，如何管理副作用，特别是如何在组件挂载、更新、卸载时进行清理，显得尤为重要。

Vue 3 中的副作用管理

Vue 3 引入了 Composition API，为副作用的管理提供了更多灵活性。通过 onMounted、onUpdated、onUnmounted 和 watch 等 API，我们可以清晰地控制副作用的执行和清理。

启动副作用

在 Vue 3 中，启动副作用通常使用 onMounted 和 watch：

• onMounted：当组件挂载完成后，执行副作用操作。
• watch：用于监听响应式数据的变化，当数据发生变化时，执行相应的副作用。

示例：启动副作用

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 在组件挂载时启动副作用
    onMounted(() => {
      console.log('组件已挂载');
    });

    // 监听 count 变化并启动副作用
    watch(count, (newCount) => {
      console.log('count 变化了', newCount);
    });

    // 增加 count
    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
};
</script>

在上述代码中：

• onMounted 用于在组件挂载时启动副作用。
• watch 用于监听 count 的变化，并执行副作用。

清理副作用

副作用可能需要在组件卸载时进行清理，以避免内存泄漏或不必要的操作。Vue 3 提供了 onUnmounted 来帮助我们清理副作用。

示例：清理副作用

<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 启动副作用
    onMounted(() => {
      const timer = setInterval(() => {
        count.value++;
      }, 1000);

      // 清理副作用：停止定时器
      onUnmounted(() => {
        clearInterval(timer);
      });
    });

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

这里，定时器启动后，每秒更新 count 的值；onUnmounted 确保组件卸载时停止定时器，避免内存泄漏。

React 中的副作用管理

React 使用 useEffect 来处理副作用，它是一个非常强大的 Hook，允许我们在组件挂载、更新、卸载时执行副作用操作。useEffect 接受两个参数：

• 第一个参数是一个副作用函数。
• 第二个参数是一个依赖数组，决定副作用何时触发。

启动副作用

副作用会在组件挂载后、更新时执行，useEffect 让我们能够明确地控制副作用的时机。

示例：启动副作用

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

function App() {
  const [count, setCount] = useState(0);

  // 在组件挂载或 count 变化时启动副作用
  useEffect(() => {
    console.log('组件已挂载或 count 变化', count);
  }, [count]); // 依赖 count，count 变化时执行副作用

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

在这个例子中，useEffect 会在组件挂载或 count 变化时执行副作用。依赖数组 [count] 确保只有当 count 发生变化时，副作用才会再次执行。

清理副作用

useEffect 还支持返回一个清理函数，当副作用需要被清理时，可以通过返回该函数来完成清理工作。常见的清理场景包括：取消定时器、移除事件监听、取消 API 请求等。

示例：清理副作用

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

function Timer() {
  const [count, setCount] = useState(0);

  // 启动副作用并返回清理函数
  useEffect(() => {
    const timerId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 清理副作用
    return () => {
      clearInterval(timerId); // 清除定时器
    };
  }, []); // 空数组确保副作用只执行一次

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

在上述代码中，定时器在组件挂载时启动，并通过 return 返回一个清理函数，确保组件卸载时定时器被清除，从而避免内存泄漏。

异步副作用的管理：取消未完成的请求

在前端开发中，异步操作（如 API 请求）常常会引发副作用，特别是在组件卸载或数据更新时。如果我们不妥善管理这些异步操作，可能会导致一些问题，例如在组件卸载后仍尝试更新组件的状态，导致内存泄漏或错误的 UI 状态。

让我们通过 Vue 3 和 React 分别看一个常见的异步副作用管理例子——取消未完成的网络请求。

Vue 3 中的异步副作用管理

在 Vue 3 中，我们可以利用 onMounted 和 onUnmounted 来启动和清理异步操作。通过在异步请求中使用 AbortController 来取消请求，我们可以确保组件卸载时停止不必要的请求。

示例：使用 AbortController 取消异步请求

<template>
  <div>
    <p v-if="loading">加载中...</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const loading = ref(true);
    const abortController = new AbortController(); // 创建一个 AbortController 实例

    // 在组件挂载时发起异步请求
    onMounted(async () => {
      try {
        const response = await fetch('<https://jsonplaceholder.typicode.com/posts/1>', {
          signal: abortController.signal // 关联请求与 AbortController
        });
        data.value = await response.json();
        loading.value = false;
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error('请求失败', error);
        }
      }
    });

    // 在组件卸载时取消请求
    onUnmounted(() => {
      abortController.abort(); // 取消请求
    });

    return { data, loading };
  }
};
</script>

解释：

1. AbortController：AbortController 是浏览器原生的 API，允许我们在发起请求时控制请求的取消。
2. 在组件挂载时，发起异步请求。
3. 如果组件卸载或请求仍未完成，调用 abortController.abort() 来取消请求，防止请求完成后更新已卸载组件的状态。

React 中的异步副作用管理

在 React 中，我们通常通过 useEffect 来处理副作用。为了正确管理异步操作，可以使用 AbortController 或取消异步请求的标记来避免在组件卸载后继续进行无效的状态更新。

示例：使用 AbortController 取消异步请求

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

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

  useEffect(() => {
    const abortController = new AbortController(); // 创建一个 AbortController 实例

    // 发起异步请求
    const fetchData = async () => {
      try {
        const response = await fetch('<https://jsonplaceholder.typicode.com/posts/1>', {
          signal: abortController.signal, // 关联请求与 AbortController
        });
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error('请求失败', error);
        }
      }
    };

    fetchData();

    // 在组件卸载时取消请求
    return () => {
      abortController.abort(); // 取消请求
    };
  }, []); // 空依赖数组确保副作用只执行一次

  return (
    <div>
      {loading ? <p>加载中...</p> : <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

export default App;

解释：

1. AbortController：通过 AbortController 创建一个控制器，并将其传递给 fetch 请求。
2. 使用 useEffect 发起异步请求。
3. 使用 return 返回清理函数，在组件卸载时调用 abortController.abort()，取消未完成的请求，避免在组件卸载后更新状态。

无论是在 Vue 3 还是 React 中，异步副作用管理的关键是确保在组件卸载时清理任何未完成的异步操作。通过使用 AbortController 或类似机制，我们可以有效地取消未完成的请求，防止内存泄漏或无效的状态更新。

• Vue 3 中使用 onMounted 来发起请求，使用 onUnmounted 来清理请求。
• React 中使用 useEffect 来处理副作用，返回清理函数来取消未完成的请求。

启动与清理副作用的最佳实践

1. 确保副作用只在需要时启动

• Vue 3：通过 onMounted 和 watch 控制副作用的执行时机，确保副作用不会不必要地重复执行。
• React：通过 useEffect 的依赖数组控制副作用的执行时机。确保副作用只在必要时执行，例如使用空数组 [] 来确保副作用只在组件挂载时执行一次，或者根据特定的依赖（如某个状态）来执行。

2. 清理副作用以防内存泄漏

副作用如果没有清理好，可能会导致内存泄漏。无论是在 Vue 3 还是 React 中，确保在组件卸载时清理不再需要的副作用资源。例如，清理定时器、移除事件监听等操作。

3. 异步副作用的管理

异步操作是副作用的一部分，特别是网络请求。处理异步副作用时，需要确保组件卸载时能够取消未完成的请求，避免更新已卸载组件的状态，导致内存泄漏或错误。

总结

副作用是前端开发中常见且不可避免的操作，正确管理副作用对于性能和应用稳定性至关重要。无论是在 Vue 3 还是 React 中，开发者都可以利用各自的机制来启动和清理副作用。Vue 3 提供了 onMounted、watch 和 onUnmounted 等 API，而 React 则通过 useEffect Hook 来处理副作用。通过合理使用这些 API，我们可以确保副作用被正确启动，并在必要时进行清理，从而保持应用高效、稳定和易于维护。