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

useEffect-副作用函数的返回值-清理副作用的写法相关推荐

wpf 窗口的返回值_如何：获取页函数的返回值
如何:获取页函数的返回值How to: Get the Return Value of a Page Function 03/30/2017 本文内容本示例显示如何获取页函数的返回值.This ex ...
getchar()函数的返回值赋给char型，用if(ch=getchar() != EOF)测试，输入ctrl+z同样可以结束循环的分析...
2013-07-18 21:35:58 getchar()函数的返回值赋给char型,用if(ch=getchar() != EOF)测试,输入ctrl+z同样可以结束循环的分析. char是字符型数 ...
ajax回调函数的返回值,使用ajax和回调函数向函数传递/返回值
我试图读p_info函数返回从函数getproductInfo包含ajax调用,但我得到未定义的值.我使用回调函数来实现这一点,但仍然无法正常工作.我错在哪里?使用ajax和回调函数向函数传递/返回值 ...
Long类型传到前端失去精度（2）：Long类型不是实体类的某一个字段，Long类型是一个函数的返回值
Long类型传到前端失去精度(2):Long类型不是实体类的某一个字段,Long类型是一个函数的返回值又是转换Mybatis-Plus的一天,又遇到了之前熟悉的问题:Long类型传到前端失去精度.可 ...
C++知识点8——函数的返回值
函数的返回值不能是数组或函数,但是可以是是数组和函数的指针或引用函数返回一个值的过程和初始化完全一致,先创建一个临时变量,用返回值初始化该临时变量,然后用该临时变量去初始化另一个变量或者给另一个变量 ...
函数的初识；函数的返回值；函数的传参
函数的初识: 避免重复代码,增强可读性. 函数是以功能为导向的. def 函数名(形参): 函数体函数名() 实参 def 关键字函数名(与变量命名规则一样) 1.由数字字母下划线组成 2.不能由 ...
Swift2.0语言教程之函数的返回值与函数类型
Swift2.0语言教程之函数的返回值与函数类型 Swift2.0中函数的返回值根据是否具有返回值,函数可以分为无返回值函数和有返回值函数.以下将会对这两种函数类型进行讲解. Swift2.0中具有 ...
Python基本语法_函数_返回值
目录目录前言函数的返回值在函数中Return和Print的区别函数中的文档前言函数的返回值是函数重要的组成部分.函数的根本在于实现程序的部分功能,所以很多时候我们需要将函数执行后的结果返 ...
java 函数参数返回值_java中如何用函数返回值作为post提交的参数？
1.我想实现的功能是在java程序中导入HttpURLConnection类,然后将函数的值作为post方法要提交的参数,最后显示在显示台上. 2.要用到的函数是自己写的可以显示实时计算机cpu.内存 ...

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

useEffect-副作用函数的返回值-清理副作用的写法相关推荐

最新文章

热门文章