格式
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'))