简述在函数组件中使用哪个Hook可以包裹副作用（改变 DOM、添加订阅、设置定时器、记录日志等） ？

在函数组件中，你可以使用 useEffect Hook 来包裹副作用。useEffect 允许你在函数组件中执行副作用操作，这些操作可能包括改变 DOM、添加订阅、设置定时器、记录日志等。

useEffect 的基本用法如下：

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 副作用代码
    // 这个函数会在组件渲染后执行，并且在每次组件的 props 或 state 发生变化时重新执行

    // 例如，我们可以添加订阅、设置定时器、改变 DOM 等
    const subscription = props.source.subscribe();
    const id = setInterval(() => {
      console.log('每秒打印一次');
    });

    // 清除副作用的代码应该放在这个返回的函数中
    // 这样，当组件卸载或 props/state 发生变化时，我们可以清除之前的副作用
    return () => {
      subscription.unsubscribe();
      clearInterval(id);
    };
  }, [props.source]); // 依赖列表，当这些值发生变化时，副作用函数会重新执行

  return <div>Hello, World!</div>;
}

在这个例子中，useEffect 的回调函数包含了一些副作用代码。当 Example 组件首次渲染时，这个回调函数会被执行。当 props.source 发生变化时，回调函数也会被执行。在返回的函数中，我们清除了之前的副作用，以确保不会出现内存泄漏或其他问题。

需要注意的是，useEffect 的回调函数会在每次组件渲染后执行，因此你应该避免在其中执行过于昂贵的操作，以免影响性能。如果你需要执行的操作只会在组件首次渲染后执行一次，你可以将依赖列表留空，如下所示：

useEffect(() => {
  // 只会在组件首次渲染后执行一次的副作用代码
}, []);