React useEffect的理解与使用

目录
  • useEffect 介绍
  • 特殊情况处理

useEffect 介绍

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做

componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

  • componentDidMount 组件挂载
  • componentDidUpdate 组件更新
  • componentWillUnmount 组件将要摧毁

使用方法

情况一：

useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组

代码如下：

useEffect(() => {
/** 执行逻辑 */
},[])

情况二：

  • 第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行
  • 第二个参数可以不传，不会报错，但浏览器会无限循环执行逻辑处理函数。

代码如下：

useEffect(() => {
/** 执行逻辑 */
})

情况三：

第二个参数如果只传一个空数组，逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ，等价于 componentDidMount

代码如下：

useEffect(() => {
/** 执行逻辑 */
},[])

情况四：

  • 第二个参数如果不为空数组,依赖指定参数触发使用
  • 逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和componentDidUpdate 的结合
const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 执行逻辑 */
},[a,b])

情况五：

  • useEffect第一个参数可以返回一个回调函数，这个回调函数将会在组件被摧毁之前和再一次触发更新时，将之前的副作用清除掉。这就相当于componentWillUnmount。
  • useEffect去除副作用。我们可能会在组件即将被挂载的时候创建一些不断循环的订阅（计时器，或者递归循环）。在组件被摧毁之前，或者依赖数组的元素更新后，应该将这些订阅也给摧毁掉。

比如以下的情况（没有去除计时器，增大不必要的开销和代码风险）

const [time, setTime] = useState(0)
useEffect(() => {
	const InterVal = setInterval(() => {
		setTime(time + 1)
	},1000)
},[])

处理在组件被摧毁前去除计时器

const [time, setTime] = useState(0)
useEffect(() => {
	const InterVal = setInterval(() => {
		setTime(time + 1)
	},1000)
	return () => {
   		clearInterval(InterVal )
   	}
},[])

特殊情况处理

useEffect监测不到依赖数组元素的变化。

只有一种可能，依赖数组元素的地址的值根本就没变，

原因：因为changeA没有真正的改变a在栈中的值（地址的值），只是改变了a在堆中的值。

useEffect监测不到堆中值得变化，所有引用类型数据都应该注意这一点。

代码示例:

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
	setA((old) => {
	old.b = 'yx'
	return old
	})
}
useEffect(() => {
/** 当组件挂载时执行一次changeA */
changeA ()
},[])
/**当changeA执行却没有打印 a*/
useEffect(() => {
/** 执行逻辑 */
console.log(a)
},[a])

解决的办法

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
	setA((old) => {
	const newA = {...old}
	newA .b = 'yx'
	return newA
	})
}
useEffect(() => {
/** 当组件挂载时执行一次changeA */
changeA ()
},[])
/**当changeA执行打印  {b:'yx',c:'18'}  */
useEffect(() => {
/** 执行逻辑 */
console.log(a)
},[a])

到此这篇关于React useEffect的理解与使用的文章就介绍到这了,更多相关React useEffect内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React useEffect使用教程

    目录 一.每一次渲染都有它自己的 Props and State 二.每次渲染都有它自己的Effects 三.关于依赖项不要对React撒谎 四.两种诚实告知依赖的方法 五.来自useReducer的助攻 六.把函数移到Effects里 七.我不想把可复用的函数放到Effect里 这篇文章会假设你对useEffectAPI有一定程度的了解. 一.每一次渲染都有它自己的 Props and State 在我们讨论 effects 之前,我们需要先讨论一下渲染,当我们更新 state 的时候,Rea

  • React深入分析useEffect源码

    React深入分析useEffect源码

    目录 热身准备 初始化 mount 更新 update updateEffect 执行副作用 总结 热身准备 这里不再讲useLayoutEffect,它和useEffect的代码是一样的,区别主要是: 执行时机不同: useEffect是异步, useLayoutEffect是同步,会阻塞渲染: 初始化 mount mountEffect 在所有hook初始化时都会通过下面这行代码实现hook结构的初始化和存储,这里不再讲mountWorkInProgressHook方法 var hook =

  • React-Hook中使用useEffect清除定时器的实现方法

    React-Hook中使用useEffect清除定时器的实现方法

    目录 useEffect useEffect清除定时器 最后 useEffect 之前我们学习了class组件的声明周期,那么我们想在函数式组件中做一些声明周期有关操作能否实现呢?函数式组件中是没有生命周期的,所以就可以使用useEffect来替代.我们可以把useEffect看作组件加载.组件更新.组件卸载的三个生命周期方法的组合. 下面我们一起来通过案例学习useEffect的使用:1.这里需求是写一个点击事件让state累加,并且吧state展示在title上2.首先要导入React, {

  • React使用useEffect解决setState副作用详解

    React使用useEffect解决setState副作用详解

    目录 介绍一下API fetch()方法访问API setState的副作用 使用useEffect解决这个问题 使用useEffect操控函数运行 介绍一下API 本文主要内容:描述了setState与fetch之间产生的冲突副作用,并使用useEffect进行解决 API,即Application Programming Interface,应用程序接口,是很多程序向开发人员提供的易于使用的抽象化的代码. 比如经常会用到的查询天气API,智能识图API,如果是直接照着复杂的代码编写,会相当不

  • React函数式组件Hook中的useEffect函数的详细解析

    React函数式组件Hook中的useEffect函数的详细解析

    目录 前言 useEffect的作用 useEffect的使用? 1.class组件 2.函数式组件 总结 前言 React函数式编程没有生命周期,因此需要借助useEffect来实现. useEffect的作用 发ajax请求获取数据 设置订阅/获取定时器 手动更改真实DOM useEffect的使用? 1.class组件 在class组件中可以使用生命周期函数,知道组件触发的过程. 代码如下(示例): import React, { Component } from 'react' expo

  • React中useEffect与生命周期钩子函数的对应关系说明

    目录 React useEffect与生命周期钩子函数的对应关系 使用格式一:不带参数的情况 使用格式二:带第二个参数,参数为空数组 使用格式三:带第二个参数,并且指定了依赖项 使用格式四:依赖项为空,没有具体的副作用函数.但是有副作用函数的清理函数. React函数式组件用useEffect模拟三个生命周期钩子函数 React useEffect与生命周期钩子函数的对应关系 在React的函数组件中,useEffect的作用其实也对标了类组件中的生命周期,它的四种使用格式也与生命周期的四种钩子

  • React useEffect的理解与使用

    React useEffect的理解与使用

    React16.8新增的useEffec这个hook函数就是处理副作用的. 所谓的"副作用",举个通俗一点的例子,假如感冒了本来吃点药就没事了,但是吃了药发现身体过敏了,而这个"过敏"就是副作用. 放到React中,本来只是想渲染DOM展示到页面上,但除了DOM之外还有数据,而这些数据必须从外部的数据源中获取,这个"获取外部数据源"的过程就是副作用. useEffect怎么用可以参考官网给出的例子,这里主要针对使用useEffect过程中遇到的问

  • React useEffect的理解与使用

    目录 useEffect 介绍 特殊情况处理 useEffect 介绍 如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合. componentDidMount 组件挂载 componentDidUpdate 组件更新 componentWillUnmount 组件将要摧毁 使用方法 情况一: useEffect需

  • 教你react中如何理解usestate、useEffect副作用、useRef标识和useContext

    教你react中如何理解usestate、useEffect副作用、useRef标识和useContext

    目录 1.usestate 1.1一般使用 1.2 useState回调函数作为参数 2.useEffect副作用 2.1 useEffect副作用及其使用 2.2 useEffect清理副作用 2.3 useEffect发送网络请求 3.自定义hook函数 4.useRef的使用 5.useContext的使用 1.usestate 1.1一般使用 注意:useState 的初始值(参数)只会在组件第一次渲染时生效.也就是说,以后的每次渲染,useState 获取到都是最新的状态值,React

  • React useEffect异步操作常见问题小结

    目录 三个常见的问题: 一.react hooks发异步请求 二.如何在组件加载的时候发起异步任务 三.如果在响应回来之前组件被销毁了会怎样? 四.如何在组件交互时发起异步任务 为什么两种写法会有差异呢? 五.其他陷阱 总结 useEffect 和异步任务搭配使用的时候会遇到的一些坑总结. 三个常见的问题: 1.如何在组件加载的时候发起异步任务 2.如何在组件交互的时候发起异步任务 3.其他陷阱 一.react hooks发异步请求 1.使用useEffect发起异步任务,第二个参数使用空数组可

  • 聊一聊我对 React Context 的理解以及应用

    聊一聊我对 React Context 的理解以及应用

    前言 Context被翻译为上下文,在编程领域,这是一个经常会接触到的概念,React中也有. 在React的官方文档中,Context被归类为高级部分(Advanced),属于React的高级API,但官方并不建议在稳定版的App中使用Context. The vast majority of applications do not need to use content. If you want your application to be stable, don't use context

  • 浅谈react useEffect闭包的坑

    浅谈react useEffect闭包的坑

    问题代码 看一段因为useEffect导致的闭包问题代码 const btn = useRef(); const [v, setV] = useState(''); useEffect(() => { let clickHandle = () => { console.log('v:', v); } btn.current.addEventListener('click', clickHandle) return () => { btn.removeEventListener('clic

  • 如何解决React useEffect钩子带来的无限循环问题

    如何解决React useEffect钩子带来的无限循环问题

    目录 什么导致的无限循环以及如何解决它们 如何解决这个问题 使用函数作为依赖项 使用数组作为依赖项 将对象作为依赖项传递 传递不正确的依赖项 结尾 React的useEffect Hook可以让用户处理应用程序的副作用.例如: 从网络获取数据:应用程序通常在第一次加载时获取并填充数据.这可以通过useEffect函数实现 操作UI:应用程序应该响应按钮点击事件(例如,打开一个菜单) 设置或结束计时器:如果某个变量达到预定义值,则内置计时器应自行停止或启动 尽管useEffect Hook在Rea

  • React useEffect不支持async function示例分析

    目录 引言 React为什么这么设计呢? 简单改造 1.简单改造的写法(不推荐) 2.把异步提取成单独函数或自定义hook(推荐) 引言 useEffect相比大家都耳熟能详啦,如下这种写法,应该是非常常见的需求. useEffect(async () => { await getPoiInfo(); // 请求数据 }, []); 但是 React 本身并不支持这么做,理由是 effect function 应该返回一个销毁函数(effect:是指return返回的cleanup函数),如果

  • vue转react useEffect的全过程

    vue转react useEffect的全过程

    目录 vue转react useEffect useEffect的第二个参数 useEffect的使用 useEffect清除 vue2转战React Hooks实践 开发思路上 代码组织结构上 vue转react useEffect useEffect用于处理组件中的effect,通常用于请求数据,事件处理,订阅等相关操作. useEffect的第二个参数 1.当useEffect没有第二个参数时 通过这个例子可以看到useEffect没有第二个参数时不停的在调用 2.当useEffect第二

随机推荐