关于程序员: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]);
  
  // 组件的其余代码
}

作用

• 解决副作用操作，例如数据获取、订阅事件、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 多平台公布