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

格式

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

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

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

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

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

清理函数的执行时机：

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

• 

  /* eslint-disable no-unused-vars */
  /* eslint-disable no-use-before-define */
  import React, { useEffect, useState } from 'react'
  import ReactDOM from 'react-dom'
  // console.log(useEffect, useState)
  class Com extends React.Component {
    render () {
      return (<div>
              com
          </div>)
    }
  }
  export default function Clear () {
    const [count, setCount] = useState(5)
    const [isShow, setShow] = useState(true)
    useEffect(() => {
      console.log('useEffect执行了', useEffect)
      return () => {
        console.log('useEffect的清理函数执行了', '副作用函数的清理函数')
      }
    })
    const hClick = () => {
      setShow(false)
    }
    return (<div>
        副作用的清理函数
        count:{count}
        {isShow ? <Com /> : ''}   {isShow&&<Com />}
        <button type="button" onClick={hClick}>点击创建组件</button>
      </div>)
  }
  
  ReactDOM.render(<Clear />, document.getElementById('root'))

  组件的销毁与创建 

  /* eslint-disable no-unused-vars */
  /* eslint-disable no-use-before-define */
  import React, { useEffect, useState } from 'react'
  import ReactDOM from 'react-dom'
  // console.log(useEffect, useState)
  class Com extends React.Component {
    render () {
      return (<div>
              com
          </div>)
    }
  }
  export default function Clear () {
    const [count, setCount] = useState(5)
    const [isShow, setShow] = useState(true)
    useEffect(() => {
      console.log('useEffect执行了', useEffect)
      return () => {
        console.log('useEffect的清理函数执行了', '副作用函数的清理函数')
      }
    })
    const hClick = () => {
      setShow(!isShow)
    }
    return (<div>
        副作用的清理函数
        count:{count}
        {isShow ? <Com /> : ''}
        <button type="button" onClick={hClick}>点击创建组件</button>
      </div>)
  }
  
  ReactDOM.render(<Clear />, document.getElementById('root'))

• // 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'))