Day7:浅谈useEffect

「目标」: 持续输出！每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。

Day7-今日话题

useEffect 是 React 中一个非常重要的 Hook，用于处理副作用和订阅外部数据源的变化。它可以在函数式组件中执行各种操作，例如数据获取、订阅事件、手动DOM操作等。下面我将从以下五个角度介绍useEffect：

1. 用法
2. 作用
3. 工作原理
4. 优缺点
5. 使用注意点

对于经常使用vue进行开发的同学来说，可以类比成watch

用法

useEffect 在函数式组件内被调用，用于在组件渲染后执行副作用操作，它接受两个参数。

第一个参数是一个回调函数，该函数包含副作用操作的代码, 可以可选地返回一个清理函数，用于在组件卸载或下一次副作用触发前执行清理操作。

第二个参数是一个数组，用于指定依赖项。如果依赖项发生变化，useEffect 将重新运行。如果为空数组，useEffect 仅在组件挂载和卸载时运行一次

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里编写副作用操作
    // 返回一个清理函数，可选
    return () => {
      // 在组件卸载或下一次副作用触发前执行清理操作
    };
  }, [dependencies]);
  
  // 组件的其他代码
}
1

作用

• 处理副作用操作，例如数据获取、订阅事件、DOM 操作等。
• 在组件挂载和更新时触发副作用操作。
• 在组件卸载时清理副作用操作，以防止内存泄漏和不必要的副作用。

工作原理

概括

useEffect 利用 React 的调度机制，在组件渲染后执行指定的副作用操作。React 会确保在浏览器完成绘制之后才执行这些操作，以避免阻塞渲染。

详细

• 「组件挂载」：当一个组件首次渲染到页面上时，React 会执行组件函数，包括其中的 useEffect 回调函数。这个回调函数中包含了需要执行的副作用操作。此时，React 不会等待副作用操作完成，而是将其加入一个队列中，以便稍后执行。

• 「浏览器绘制完成后执行」：React 会等待浏览器完成当前的渲染工作，确保页面元素已经呈现给用户。一旦浏览器完成绘制，React 会执行队列中的副作用操作。这可以确保副作用操作不会阻塞页面的渲染，从而提高用户体验。

• 「组件更新」：当组件的状态或 props 发生变化时，React 会重新渲染组件。如果在 useEffect 中指定了依赖项数组，React 将比较当前的依赖项和上一次渲染时的依赖项。如果它们不一致，说明依赖项发生变化，React 将再次执行 useEffect 中的回调函数。

• 「清理操作」：如果 useEffect 中返回了一个函数（清理函数），这个函数将在下一次副作用操作执行之前运行。这通常用于清理资源、取消订阅或处理副作用的清理工作。

• 「组件卸载」：当组件从页面中卸载时（如路由切换或组件不再需要渲染），React 会执行清理函数（如果存在），以确保释放副作用操作可能持有的资源，从而避免内存泄漏。

• 「性能优化」：React 还会进行一些性能优化，例如将多个 useEffect 中的副作用操作合并成一个以减少不必要的工作。这是通过内部的调度机制来实现的，React 会智能地决定何时执行哪些副作用操作。

优缺点

• 优点:

  • 可以用于处理副作用操作，保持组件的纯粹性。
  • 可以轻松管理副作用的触发时机。
  • 可以避免内存泄漏，清理不再需要的资源。
• 缺点:

  • 如果不小心使用，可能会导致性能问题，因为副作用函数可能在每次渲染时都被调用。
  • 需要小心处理副作用函数的依赖项，否则可能会导致无限循环调用。

使用注意点

• 避免在副作用操作中修改组件状态，以免导致循环更新。
• 如果需要在 useEffect 中访问组件的 state 或 props，确保将它们添加到依赖项数组中，以防止闭包陷阱。
• 注意清理操作，确保在组件卸载时释放资源或取消订阅。
• 如果有多个 useEffect，可以将它们拆分为不同的副作用逻辑，以提高可读性。

欢迎点赞、关注、转发～