10 | React Hooks（下）：用Hooks处理函数组件的副作用

在React的旅程中，Hooks的引入无疑是一场革命，它允许我们在不编写类的情况下使用状态（state）和其他React特性。随着对Hooks的深入探索，我们不难发现，它们不仅简化了状态管理，还提供了强大的机制来处理函数组件中的副作用（side effects）。本章节将聚焦于React Hooks的“下半场”——特别是如何使用useEffect、useLayoutEffect等Hooks来优雅地处理函数组件的副作用，以及它们之间的区别和适用场景。

一、理解副作用

在React中，副作用是指那些发生在渲染过程之外，但可能依赖于组件状态或属性的操作。例如，数据获取、订阅或手动更改DOM都属于副作用。在传统的类组件中，我们通常在componentDidMount、componentDidUpdate和componentWillUnmount等生命周期方法中处理这些操作。然而，在函数组件中，由于缺少这些生命周期方法，Hooks成为了处理副作用的关键工具。

二、useEffect Hook

useEffect是React中最常用的Hook之一，用于在函数组件中执行副作用操作。它接受一个函数作为参数（称为“effect”函数），该函数会在组件渲染到屏幕后执行。重要的是，useEffect中的effect函数会在组件的每次渲染后执行，但React提供了一种方式（通过依赖项数组）来优化这一行为，确保effect仅在相关依赖项改变时运行。

1. 基本用法

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 类似于componentDidMount和componentDidUpdate:
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这个例子中，每次组件渲染后，useEffect中的函数都会执行，更新文档的标题。然而，由于我们没有提供依赖项数组，这会导致在每次渲染后都执行，可能不是最优选择。

2. 依赖项数组

为了优化useEffect的执行，我们可以传递一个依赖项数组作为第二个参数。这样，只有当数组中的值发生变化时，effect函数才会重新执行。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 只有当count改变时，effect才会重新运行

3. 清理副作用

有时候，我们需要在组件卸载时或依赖项变化前执行一些清理操作（如取消订阅、移除事件监听器等）。useEffect允许我们返回一个函数，该函数将在组件卸载或effect重新运行之前执行。

useEffect(() => {
  const subscription = someLibrary.subscribeToEvent(() => {
    // 处理事件
  });
  return () => {
    // 清理订阅
    subscription.unsubscribe();
  };
}, []); // 空数组表示effect仅在组件挂载时运行一次

三、useLayoutEffect Hook

尽管useEffect在大多数情况下都能满足需求，但在某些特定场景下，我们可能需要在所有DOM变更之后、浏览器进行任何绘制之前执行副作用。这就是useLayoutEffect的用武之地。

1. 与useEffect的区别

• 执行时机：useEffect在浏览器绘制之后同步执行，而useLayoutEffect在浏览器绘制之前同步执行。
• 使用场景：由于useLayoutEffect的同步性，它适用于读取DOM布局并同步重新渲染的场景，如调整元素尺寸或滚动位置。
• 性能考虑：由于useLayoutEffect会在所有DOM变更后立即执行，过多地使用它可能会导致性能问题。

2. 示例

假设我们有一个组件，它需要根据其内容的尺寸来调整样式。使用useLayoutEffect可以确保在DOM更新后立即获取到正确的尺寸。

import React, { useRef, useLayoutEffect } from 'react';
function ResizeObserverExample() {
  const ref = useRef(null);
  useLayoutEffect(() => {
    const observer = new ResizeObserver(entries => {
      for (let entry of entries) {
        console.log(entry.contentRect.width, entry.contentRect.height);
      }
    });
    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      observer.disconnect();
    };
  }, []); // 仅在组件挂载时运行
  return <div ref={ref}>Resize me!</div>;
}

在这个例子中，我们创建了一个ResizeObserver来监听元素尺寸的变化，并使用useLayoutEffect来确保在DOM更新后立即执行。

四、总结

通过useEffect和useLayoutEffect，React为函数组件提供了强大的机制来处理副作用。useEffect适用于大多数需要异步操作或不影响DOM布局的副作用，而useLayoutEffect则适用于需要同步读取DOM布局并立即重渲染的场景。正确选择和使用这些Hooks，可以帮助我们编写出更加高效、可维护的React组件。

随着对React Hooks的深入理解，我们可以发现它们不仅仅是简单的状态管理工具，更是构建现代React应用的关键所在。通过合理利用Hooks，我们能够以更加声明式、函数式的方式编写React代码，享受更加灵活、强大的编程体验。