useEffect-副作用函数的返回值-清理副作用的写法

格式

useEffect(() => {
  // 副作用函数的内容

  return 副作用函数的返回值
}, [])

副作用函数的返回值是可选的，可省略。也可以返回一个清理函数，用来清理副作用

useEffect(() => {
  // 副作用函数的内容

  return （）=>{ /* 做清理工作*/ } // 清理函数
}, [])

清理函数的执行时机：

• 清理函数会在组件卸载时以及下一次副作用函数调用之前执行
• 点击按钮清除鼠标移动事件

• // eslint-disable-next-line no-use-before-define
  import React, { useEffect, useState } from 'react'
  import ReactDOM from 'react-dom'
  console.log(useEffect)
  export default function App () {
    // eslint-disable-next-line no-unused-vars
    // 定义显示的状态
    const [isShow] = useState(true)
    const [count, setCount] = useState(10)
    console.log(setCount)
    // 声明鼠标移动的事件
    function move (e) {
      console.log(e.clientX, e.clientY)
    }
    useEffect(() => {
      // 鼠标移动的事件
      window.addEventListener('mousemove', move)
      // 清理副作用的函数
      return () => {
        window.removeEventListener('mousemove', move)
      }
    })
    return (<div>
        清理副作用{count}
        <button type="buttton" onClick={() => isShow && <App />}>组件卸载</button>
    </div>)
  }
  ReactDOM.render(<App />, document.getElementById('root'))

标签：move,return,函数,清理,副作用,返回值,useEffect
来源： https://blog.csdn.net/yezi153/article/details/121294659