Skip to main content

useEffect

用于处理副作用操作,以及模拟类组件的生命周期方法。

副作用操作

  • 处理数据获取
  • 订阅
  • DOM 操作

模拟类组件的生命周期方法

  • componentDidMount(组件被挂载完成后)
  • componentDidUpdate(组件重新渲染完成后)
  • componentWillUnmount(组件即将被卸载前)

在组件渲染完成后,即组件的 DOM 元素都已经渲染到页面上后,才调用 useEffect。

index.tsx
import React, { useEffect } from 'react';

function MyApp() {

useEffect(() => {
//此处编写 组件挂载之后和组件重新渲染之后执行的代码
...

return () => {
//此处编写 组件即将被卸载前执行的代码
...
}
},[deps])

return (
<></>
);
}

export default MyApp;

deps 传值说明

  • 若省略依赖数组,在每次组件挂载、重新渲染以及组件即将被卸载前,useEffect 都会触发
  • 若传递非空依赖数组,当数组内的变量发生变化时,useEffect 才会触发
    • 这可以用于优化性能,只在特定的变量变化时执行副作用
  • 若传递空依赖数组 [] ,这表示 useEffect 不依赖于任何变量,只会在组件挂载完成后以及组件即将被卸载前触发一次
    • 这在只需要在挂载和卸载时执行一次的场景下很有用,例如添加和清除订阅