「目标」: 持续输出！每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。
Day7-今日话题
useEffect 是 React 中一个非常重要的 Hook，用于处理副作用和订阅外部数据源的变化。它可以在函数式组件中执行各种操作，例如数据获取、订阅事件、手动DOM操作等。下面我将从以下五个角度介绍useEffect：
-
用法 -
作用 -
工作原理 -
优缺点 -
使用注意点
对于经常使用vue进行开发的同学来说，可以类比成watch
用法
useEffect 在函数式组件内被调用，用于在组件渲染后执行副作用操作，它接受两个参数。
第一个参数是一个回调函数，该函数包含副作用操作的代码, 可以可选地返回一个清理函数，用于在组件卸载或下一次副作用触发前执行清理操作。
第二个参数是一个数组，用于指定依赖项。如果依赖项发生变化，useEffect 将重新运行。如果为空数组，useEffect 仅在组件挂载和卸载时运行一次
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// 这里编写副作用操作
// 返回一个清理函数，可选
return () => {
// 在组件卸载或下一次副作用触发前执行清理操作
};
}, [dependencies]);
// 组件的其他代码
}
作用
-
处理副作用操作，例如数据获取、订阅事件、DOM 操作等。 -
在组件挂载和更新时触发副作用操作。 -
在组件卸载时清理副作用操作，以防止内存泄漏和不必要的副作用。
工作原理
概括
useEffect 利用 React 的调度机制，在组件渲染后执行指定的副作用操作。React 会确保在浏览器完成绘制之后才执行这些操作，以避免阻塞渲染。
详细
-
「组件挂载」：当一个组件首次渲染到页面上时，React 会执行组件函数，包括其中的 useEffect 回调函数。这个回调函数中包含了需要执行的副作用操作。此时，React 不会等待副作用操作完成，而是将其加入一个队列中，以便稍后执行。
-
「浏览器绘制完成后执行」：React 会等待浏览器完成当前的渲染工作，确保页面元素已经呈现给用户。一旦浏览器完成绘制，React 会执行队列中的副作用操作。这可以确保副作用操作不会阻塞页面的渲染，从而提高用户体验。
-
「组件更新」：当组件的状态或 props 发生变化时，React 会重新渲染组件。如果在 useEffect 中指定了依赖项数组，React 将比较当前的依赖项和上一次渲染时的依赖项。如果它们不一致，说明依赖项发生变化，React 将再次执行 useEffect 中的回调函数。
-
「清理操作」：如果 useEffect 中返回了一个函数（清理函数），这个函数将在下一次副作用操作执行之前运行。这通常用于清理资源、取消订阅或处理副作用的清理工作。
-
「组件卸载」：当组件从页面中卸载时（如路由切换或组件不再需要渲染），React 会执行清理函数（如果存在），以确保释放副作用操作可能持有的资源，从而避免内存泄漏。
-
「性能优化」：React 还会进行一些性能优化，例如将多个 useEffect 中的副作用操作合并成一个以减少不必要的工作。这是通过内部的调度机制来实现的，React 会智能地决定何时执行哪些副作用操作。
优缺点
-
优点: -
可以用于处理副作用操作，保持组件的纯粹性。 -
可以轻松管理副作用的触发时机。 -
可以避免内存泄漏，清理不再需要的资源。
-
-
缺点: -
如果不小心使用，可能会导致性能问题，因为副作用函数可能在每次渲染时都被调用。 -
需要小心处理副作用函数的依赖项，否则可能会导致无限循环调用。
-
使用注意点
-
避免在副作用操作中修改组件状态，以免导致循环更新。 -
如果需要在 useEffect 中访问组件的 state 或 props，确保将它们添加到依赖项数组中，以防止闭包陷阱。 -
注意清理操作，确保在组件卸载时释放资源或取消订阅。 -
如果有多个 useEffect，可以将它们拆分为不同的副作用逻辑，以提高可读性。
欢迎点赞、关注、转发～ 
本文由 mdnice 多平台发布
