date
Jul 21, 2024 03:14 AM
type
status
slug
summary
tags
category
updated
Oct 24, 2024 12:52 PM
icon
password
摘要
React中使用
useEffect的基本概念和常见错误，包括useEffect的运行时机、依赖关系的处理、清理函数的使用等。通过示例演示了useEffect在组件更新和页面渲染中的运行过程，以及不同数据类型之间的差异对依赖关系的影响。同时之前的文章也提到了使用useMemo和useCallback来优化useEffect的效果。总之，理解useEffect的使用对初级React开发者非常重要，可以帮助他们在项目中更加自信地使用useEffect。 基本效果
由于React的组件渲染在属性或者dom发生变化的时候会重新渲染整个组件，包括里面的数据定义，函数都会重新执行一遍。而且我们总希望在某个状态发生改变的时候执行操作，那么use Effect就完成了这一功能，也可以把
useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。下面的例子说明一下基本使用
如果说你不写副作用依赖的话，那么就像上面对React的描述一样，每次数据改变都会执行一遍useEffect，以及数据的定义，和渲染操作。
副作用是对象、数组
上面的例子只是说明副作用是基础属性，也就是数字，字符，Boolean类型的变量。当副作用是对象的时候，情况就会不一样的。在案例之前，先要明白对象是怎么产生的，如果大家编写过Java和C那么一定会很清楚，如果你没写过。你可以把对象数组这类的类型想象成你用遥控器控制了电视机，这个遥控器就是let a = {name:’’}
上面的例子只是说明副作用是基础属性，也就是数字，字符，Boolean类型的变量。当副作用是对象的时候，情况就会不一样的。在案例之前，先要明白对象是怎么产生的，如果大家编写过Java和C那么一定会很清楚，如果你没写过。你可以把对象数组这类的类型想象成你用遥控器控制了电视机，这个遥控器就是
let a = {name:’david’};中的a 而电视机自然就是内容了。经过例子分析那么监听对象的写法就如下了
清理函数
清理函数是清理一些副作用的，例如订阅外部数据源。主要是为了防止引起内存泄漏。通过一个定时器的案例可以很好的说明某些时候我们是需要清理函数的
清理函数的执行顺序
上面的执行结果，第一次会打印
console.log("useEffect runs!"); ,第二次toogle改变了，会先打印"Wait! before running the effect, I should clear here." "Okey done! You can run" 再去打印console.log("useEffect runs!"); 下面是一个普通的使用案例
下面的一些例子，也能更好的说明清理含糊的重要性。例如在接口请求的过程中，跳转到其他页面，这个时候应该不会在新页面获取到数据的更新。接口多次请求同一个请求，应该清理掉多余的请求。
跳转到其他页面
当你在/posts页面去给你求数据的时候，如果不使用清理函数，跳到/users/1还是会请求到结果。