React：useEffect - 清除副作用

useEffect - 清除副作用 介绍

在 useEffect 中编写的由渲染本身引起的对接组件外部的操作，经常称为副作用操作。例如，在useEffect中开启了一个定时器，这个就是副作用操作，如果我们想在组件卸载时及时把这个定时器再清理掉，这个过程就是清理副作用。

清除副作用的函数最常见的执行时机是在组件卸载时自动执行。

语法形如：

示例

// 目标：组件初始化时启动定时器，组件卸载时清除定时器

import { useEffect, useState } from "react"

function Son() {
  // 渲染时开启一个定时器
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器执行中...')
    }, 1000)

    return () => {
      // 清除副作用(组件卸载时)
      clearInterval(timer)
    }
  }, [])
  return <div>this is son</div>
}

function App() {
  const [show, setShow] = useState(true)
  return (
    <div>
      {show && <Son />}
      <button onClick={() => setShow(false)}>点击卸载Son子组件</button>
    </div >
  )
}

export default App

启动后，定时器每隔1秒钟打印一条信息：

点击按钮卸载子组件，定时器也被清理掉了，不再执行：