Side-effects Management and Custom Hook React中的副作用管理与自定义 Hook

欢迎观看关于 副作用管理和自定义 Hook 的视频！观看完本视频后，你将能够：

• 定义 useEffect 和副作用在 React 中的作用
• 说明 useEffect 和副作用在 React 中是如何工作的
• 了解 useEffect 中的各种依赖关系
• 了解什么是自定义 Hook 以及如何在 React 中使用它

---

什么是副作用？

在 React 中，副作用（side effects）指的是组件中需要在页面加载时执行的任何操作，这些操作通常不需要单独调用，例如：

• 从 API 获取数据
• 订阅事件
• 操作 DOM
• 设置定时器

这些操作通常是异步执行的，并且会影响应用程序的状态或 UI。

---

useEffect执行副作用

useEffect 是 React 中用于在函数组件中执行副作用的 Hook。通过 useEffect，我们可以管理异步操作和副作用，如请求数据、更新 DOM 或监听事件。

例子：获取数据并渲染

假设我们有一个组件需要从 API 获取一组食品项，并展示在页面上。以下是相关代码示例：

1. 状态管理： 使用 useState 管理组件状态。

const [foods, setFoods] = useState([]);

2. 执行副作用： 使用 useEffect 获取数据。

useEffect(() => {
  fetch('https://api.example.com/foods')
    .then(response => response.json())
    .then(data => setFoods(data))
    .catch(error => console.log('Error:', error));
}, []);

3. 渲染数据： 在 JSX 中渲染从 API 获取的食品列表。
   

return (
  <ul>
    {foods.map(food => (
      <li key={food.id}>
        <img src={food.image_url} alt={food.name} />
        <h3>{food.name}</h3>
        <p>{food.description}</p>
      </li>
    ))}
  </ul>
);

---

useEffect中的依赖关系

在 useEffect 中，依赖关系是指用于确定何时执行副作用的变量或值。依赖关系通过传入一个数组来指定。

依赖数组的行为

1. 空依赖数组 ([])： 仅在组件首次加载时执行副作用。

useEffect(() => {
  // 只会在首次渲染时执行一次
}, []);

2. 带有依赖的数组： 当依赖数组中的任何值发生变化时，副作用会重新执行。
   

useEffect(() => {
  // 当 foods 发生变化时，副作用会重新执行
}, [foods]);

3. 无依赖数组： 每次组件渲染时都会执行副作用。
   

useEffect(() => {
  // 每次组件渲染都会执行
});

---

自定义 Hook

自定义 Hook 允许你将逻辑抽象为可重用的函数，方便在不同的组件之间复用。

例子：创建一个切换按钮

假设我们有一个 ToggleButton 组件，它使用一个名为 useToggle 的自定义 Hook 来切换按钮的状态（true 或 false）。

1. 自定义 Hook (useToggle)：

function useToggle(initialState = false) {
  const [isToggled, setIsToggled] = useState(initialState);

  const toggle = () => setIsToggled(!isToggled);

  return [isToggled, toggle];
}

2. 使用 useToggle 的 ToggleButton 组件：
   

function ToggleButton() {
  const [isToggled, toggle] = useToggle();

  return (
    <button onClick={toggle}>
      {isToggled ? 'ON' : 'OFF'}
    </button>
  );
}

3. 输出：

• 点击按钮时，状态会在 ON 和 OFF 之间切换。

自定义 Hook 的优势

• 逻辑复用： 通过自定义 Hook，我们可以将复杂的逻辑封装起来，方便在不同组件之间复用。
• 简化代码： 使用自定义 Hook 可以减少重复代码，提高代码的可维护性。

---

视频总结

在本视频中，你学到了以下内容：

• useEffect 是 React 中一个重要的 Hook，它允许你在函数组件中执行副作用。
• 副作用 是异步执行的操作，会影响应用的状态或 UI，例如获取数据、订阅事件等。
• useEffect 的依赖关系帮助你控制副作用执行的时机，可以根据依赖数组来指定副作用执行的条件。
• 自定义 Hook 让你可以将复杂的逻辑封装成可重用的代码，方便在多个组件中使用。

---

🚀 通过 useEffect 和自定义 Hook，提升 React 应用的可维护性与性能！