React基础 第二十五章（Effect）

在React的世界里，Effect允许我们在组件渲染后同步执行代码，从而与外部系统进行交互。在这篇文章中，我们将深入探讨Effect的工作原理，并通过实际的代码示例来展示如何在开发中有效地使用Effect。

什么是Effect？

当我们谈论React中的Effect时，我们通常指的是useEffect这个Hook。Effect是一种特殊的功能，它允许我们在组件的生命周期中的特定时刻执行副作用操作。这些副作用操作通常是那些与组件的直接渲染输出无关的操作。

在编程中，副作用是指函数或表达式在计算结果之外对外部状态造成的变化。在React组件的上下文中，副作用可能包括：

• 数据获取：从API获取数据。
• 订阅：设置事件监听器或订阅外部数据源。
• DOM操作：直接操作DOM元素，比如设置焦点或测量元素尺寸。

这些操作通常需要在组件渲染之后执行，因为它们可能依赖于DOM元素的存在，或者我们不希望它们阻塞UI的渲染。

useEffect Hook允许我们在组件渲染到屏幕后执行代码。这意味着React会先渲染你的组件，然后在渲染完成后调用你在useEffect中指定的函数。这样做的好处是，即使副作用函数需要时间来完成，React也不会等待它，而是立即显示组件。

如何在组件中声明Effect

在React中，我们使用useEffect Hook来声明Effect。基本的使用方法如下：

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里的代码会在每次渲染后执行
  });

  return <div />;
}

Effect和事件处理的区别

事件处理函数是响应用户或系统生成的事件的代码。例如，当用户点击一个按钮时，点击事件的处理函数会被调用。这些函数通常用于处理即时的用户交互。

而Effect则不同。Effect是由React组件的渲染过程触发的，而不是由用户直接的交互触发的。Effect的目的是让我们能够执行那些需要在组件渲染后发生的操作，比如设置一个定时器、发起网络请求或者订阅某个外部数据源。

这里有一个简单的例子来说明Effect的使用：

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

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

  // 使用Effect来获取数据
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空数组意味着这个Effect只会在组件第一次渲染时运行

  // ...组件的其他部分
}

在这个例子中，useEffect用于在组件第一次渲染后从一个API获取数据。这是一个副作用，因为它涉及到与组件外部世界的交互。注意，这个Effect不会阻塞组件的渲染，因为它是在渲染完成后执行的。

避免不必要地重新运行Effect

当我们在React组件中使用useEffect Hook时，默认情况下，里面的代码会在每次组件渲染后执行。这可能会导致一些不必要的计算和副作用，尤其是当Effect内的代码并不需要在每次渲染后都执行时。为了优化性能和避免不必要的操作，React提供了一种方式来指定Effect的依赖项。

依赖项数组是useEffect的第二个参数，它是一个数组，里面包含了Effect执行所依赖的变量。当组件渲染后，React会检查这个数组中的每一项是否发生了变化。如果数组中的任何依赖项自上次Effect执行以来发生了变化，React就会再次执行Effect。如果依赖项没有变化，React则不会执行Effect。

这种机制允许我们控制Effect的执行时机，确保只在必要时才运行Effect内的代码，从而提高应用性能。

useEffect(() => {
  // 这里的代码只会在依赖项`value`变化时执行
}, [value]);

假设我们有一个组件，它接受一个value作为prop，并且我们想要在value变化时执行一些操作。

import { useEffect } from 'react';

function MyComponent({ value }) {
  useEffect(() => {
    // 这段代码只会在`value`变化时执行
    console.log(`Value has changed to: ${value}`);
  }, [value]); // 我们将`value`作为依赖项传递给Effect

  return <div>Current value is {value}</div>;
}

在这个例子中，我们传递了[value]作为useEffect的第二个参数。这告诉React，只有当value发生变化时，才需要重新执行Effect内的代码。如果value保持不变，即使组件因为其他原因重新渲染，Effect内的代码也不会执行。

这样，我们就可以避免在value未变化时执行不必要的日志记录操作，从而优化了组件的性能。

需要注意的是，我们应该确保所有Effect中引用的变量都包含在依赖项数组中。如果遗漏了依赖项，可能会导致Effect使用了过时的变量值，从而引发bug。同时，如果我们故意包含了不应该作为依赖项的变量，也可能会导致Effect过于频繁地执行，降低性能。因此，合理地管理Effect的依赖项是编写高效React代码的关键。

Effect的清理（cleanup）

在React中，useEffect Hook不仅允许我们在组件渲染后执行副作用，还允许我们在组件卸载或者Effect重新执行前进行一些清理工作。这种清理工作是通过Effect函数中返回一个函数来实现的，这个返回的函数就是清理函数。

清理函数的主要作用是执行那些必要的清理操作，以避免引起内存泄漏、取消未完成的API请求、移除事件监听器等。当组件卸载时，或者依赖项数组中的值发生变化导致Effect将要重新执行时，React会调用这个清理函数。

下面我们通过一个例子来详细解释这个概念：

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 假设这个函数用于订阅某个事件或数据流
    const subscription = subscribeToSomething();

    // 这里我们返回一个清理函数
    return () => {
      // 这个清理函数会在组件卸载时执行
      // 或者在依赖项`subscribeToSomething`变化时，Effect重新执行之前执行
      // 它的作用是取消订阅，防止内存泄漏
      subscription.unsubscribe();
    };
  }, [subscribeToSomething]); // 依赖项数组，Effect会在这个依赖项变化时重新执行

  return <div />;
}

在这个例子中，useEffect中的函数订阅了某个事件或数据流，并返回了一个清理函数。这个清理函数的作用是取消订阅。当MyComponent组件被卸载时，React会调用这个清理函数，确保取消了订阅，从而避免了潜在的内存泄漏。同样，如果subscribeToSomething这个依赖项发生变化，清理函数也会在下一次Effect执行之前被调用，以确保清理上一次的订阅。

这种模式非常重要，因为它允许我们维护组件的生命周期和资源管理，确保在不需要它们时及时释放资源。这对于那些涉及到如定时器、订阅、手动添加的事件监听器等场景尤为重要。如果不进行适当的清理，可能会导致应用程序出现不可预测的行为，甚至是性能问题。

开发环境中Effect执行两次的问题

// src/main.tsx文件
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode> <-严格模式
    <App />
  </React.StrictMode>,
)

在React中，为了帮助开发者发现潜在的问题，React团队引入了一个特性，即在开发模式下的严格模式（Strict Mode）。在严格模式下，React会故意将Effect执行两次。这是一种故意的重复调用，目的是揭露那些可能在Effect执行中不小心引入的问题。

这种行为只会在开发环境中发生，用于帮助开发者提前发现和修复潜在的问题，比如不正确的副作用逻辑、不干净的清理操作等。在生产环境中，Effect不会被执行两次。

为什么Effect会执行两次呢？这是因为在某些情况下，如果Effect中的代码不是幂等的（即多次执行结果不一致），那么可能会引入bug。例如，如果Effect中的代码在每次执行时都会创建一个新的订阅而没有适当的清理，那么就会导致多个重复的订阅存在，这可能会导致内存泄漏和不必要的性能开销。

让我们通过一个例子来理解这个问题：

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('Interval tick');
    }, 1000);

    return () => clearInterval(id);
  }, []); // 空依赖项数组，意味着Effect只在组件挂载时执行一次
}

在这个例子中，我们在Effect中设置了一个定时器，并在返回的清理函数中清除了它。如果这段代码在开发环境的严格模式下运行，Effect会执行两次，这意味着定时器会被设置两次。但是由于我们提供了清理函数，第一次设置的定时器会在第二次Effect执行前被清除，从而避免了重复设置定时器的问题。

这就要求我们在编写Effect时必须考虑到代码的幂等性，确保即使Effect被执行多次，也不会引入问题。在开发环境中的这种双重执行机制，迫使我们必须编写出更加健壮的副作用处理代码，以防止在生产环境中出现意外行为。

实际应用示例

控制视频播放状态

假设我们有一个VideoPlayer组件，我们需要根据isPlaying状态来控制视频的播放和暂停。

import { useEffect, useRef } from 'react';

function VideoPlayer({ src, isPlaying }) {
  const videoRef = useRef(null);

  useEffect(() => {
    if (isPlaying) {
      videoRef.current.play();
    } else {
      videoRef.current.pause();
    }
  }, [isPlaying]);

  return <video ref={videoRef} src={src} loop playsInline />;
}

在这个示例中，我们使用了useRef来获取视频元素的引用，并在useEffect中根据isPlaying的值来调用play或pause方法。我们将isPlaying作为依赖项传递给useEffect，以确保只有在isPlaying变化时才重新执行Effect。

订阅和取消订阅事件

如果我们需要在组件中订阅某些事件，我们可以在Effect中进行订阅，并在返回的清理函数中取消订阅。

useEffect(() => {
  const handleResize = () => {
    // 处理窗口大小变化的逻辑
  };

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

这里我们在Effect中订阅了窗口大小变化事件，并在清理函数中取消了订阅。由于我们不需要在任何特定的值变化时重新订阅，所以依赖项数组是空的。

注意事项

正确处理Effect依赖项

useEffect Hook允许你指定一个依赖项数组，这个数组告诉React哪些变量的变化应该触发Effect的重新执行。如果你在Effect中引用了组件的props或state，并且这些值可能会变化，那么你应该将它们包含在依赖项数组中。

不正确地处理依赖项可能会导致两种问题：

1. 如果你遗漏了依赖项，Effect可能会使用旧的变量值，从而导致不一致的行为。
2. 如果你包含了不必要的依赖项，Effect可能会过于频繁地执行，从而影响性能。

例如：

function MyComponent({ propValue }) {
  useEffect(() => {
    // 这个Effect使用了`propValue`，因此它应该被包含在依赖项数组中
    console.log(propValue);
  }, [propValue]); // 正确的依赖项处理
}

避免在Effect中执行昂贵的操作

在Effect中执行昂贵的操作，如大量计算、网络请求或复杂的DOM操作，可能会影响应用的性能。为了避免这些操作在每次组件更新时都执行，你应该使用依赖项数组来控制Effect的执行。

例如，如果你只想在组件挂载时执行一个昂贵的操作，你可以传递一个空数组作为依赖项：

useEffect(() => {
  // 这个昂贵的操作只会在组件挂载时执行一次
  performExpensiveOperation();
}, []); // 空依赖项数组表示Effect不依赖于任何值，因此不会重新执行

清理函数的重要性

在某些情况下，你的Effect可能会设置一些需要在组件卸载时清理的资源，如定时器、订阅或事件监听器。为了防止内存泄漏和其他资源相关的问题，你应该在Effect中返回一个清理函数。

例如，如果你在Effect中设置了一个定时器，你应该返回一个清理函数来清除它：

useEffect(() => {
  const timerId = setTimeout(() => {
    // 做一些事情
  }, 1000);

  return () => {
    clearTimeout(timerId); // 清理函数清除定时器
  };
}, []); // 如果定时器不依赖于任何值，可以传递空数组

记住，Effect是一个强大的工具，但它也需要谨慎使用。