React中的useEffect四种用法分享

更新时间：2023年07月11日 11:18:16 作者：前端小张同学

这篇文章主要给大家分享React中的useEffect四种用法，useEffect中触发更新，重复的 useEffect，依赖值触发回调，useEffect 的返回值，通过代码示例介绍的非常详细,需要的朋友可以参考下

什么是 useEffect ?

官方解释： useEffect 是一个 React Hook，它允许你将组件与外部系统同步。

什么意思？个人理解就是它能根据不同的依赖值或者返回值，在不同的时机进行执行。

我们先来说说第一种用法

1 ： useEffect 中触发更新

示例1 ：当我们在组件创建的过程，自动执行某些操作的时候，那我们可以在函数式组件中这样

错误示例

import { useEffect } from 'react'
function App () {
const [ count , setCount] = useState(0)
useEffect(()=> {
    initData()
})
const initData = () => {
    setCount(count + 1)
}
return ( <div> {count} </div> )
}

如果你这种用 useEffect 你会发现什么问题？

当我们组件渲染完成去执行 useEffect 调用 initData 函数函数通过 setCount 设置值触发更新，一旦更新 useEffect 又会在渲染的最后执行，这样就照成了 死循环

所以你应该这样写 ,传入 useEffect 第二个参数空数组，代表组件渲染过程中只执行一次

正确示例

import { useEffect } from 'react'
function App () {
const [ count , setCount] = useState(0)
useEffect(()=> {
    initData()
}, [])
const initData = () => {
setCount(count + 1)
}
return ( <div> {count} </div> )
}

2 ：用法2 重复的 useEffect

示例2 ：当我们在组件渲染的过程中，如果你写了多个useEffect 它会怎么做？

import { useEffect, useState } from 'react';
function Effect() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('111');
  })
  useEffect(() => {
    console.log('222');
  })
  return (<div> {count} </div>)
}
export default Effect

想当然，它不会覆盖前面的 useEffect ，会根据你的编写顺序进行收集，然后循环执行(当然这只是我的猜测，暂时还没看react源码)

3 ：依赖值触发回调

当你想去依赖某些变量的时候去触发回调函数，你可以这样。

import { useEffect, useState } from 'react';
function Effect() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('count发生了变化最新值为' + count);
  }, [count])
  return (<div>
    <div>
      {count}
    </div>
    <button onClick={() => setCount(count + 1)}>加1</button>
  </div>)
}
export default Effect

当你的第二个参数是数组，并且是依赖项，组件初次渲染也会执行，这是为什么呢？

解答：如果从 react useState Hook 来说，也就是 react 将你传入的默认值给你重新赋值了，所以发生了变化，因此 useEffect 发生了更新

4 ：useEffect 的返回值

当useEffect 传入的回调函数有返回值时并且为一个函数的时候，它会怎么做？

import { useEffect, useState } from 'react';
const Room = () => {
  useEffect(() => {
    console.log("子组件渲染完成")
    return () => {
      console.log("子组件useeffect 回调函数执行")
    }
  }, [])
  return (<div>
    这是我的房间 ， 大家一起来玩呀
  </div>)
}
function Effect() {
  const [show, setShow] = useState(true)
  return (<div>
    <div>
      {show && <Room></Room>}
    </div>
    <button onClick={() => setShow(!show)}>加1</button>
  </div>)
}
export default Effect

解答： useEffect函数的返回值如果是函数时它会在组件销毁的时候自动回调该函数，你可以在该函数中做一些清理操作，等等

结束啦

好了，最后到这次本章了解的知识就到此结束了，如果有哪里写的不对的地方或者有更好的使用方式，欢迎大家在评论区留言！

到此这篇关于React中的useEffect四种用法分享的文章就介绍到这了,更多相关React useEffect用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React 组件中 State 的定义、使用及正确使用方式
本文详细介绍了React组件中的state概念,包括其定义、使用方式以及如何正确更新state,通过ES6和ES7类组件的示例,展示了如何在React中定义和使用state,感兴趣的朋友跟随小编一起看看吧
2024-11-11
react使用antd表单赋值,用于修改弹框的操作
这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
React Router V5:使用HOC组件实现路由拦截功能
这篇文章主要介绍了React Router V5:使用HOC组件实现路由拦截功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-03-03
React中传递组件的三种方式小结
通过传递组件，我们可以将复杂组件内部的一部分 UI 交由外部组件来控制渲染，这也是控制反转（Inversion of Control）的一种体现，在 React 中，我们可以通过三种方式来传递组件，本文就来给大家述说这三种方式,需要的朋友可以参考下
2023-07-07
react父组件调用子组件的方式汇总
在react中常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用,下面这篇文章主要给大家介绍了关于react父组件调用子组件的相关资料,需要的朋友可以参考下
2022-08-08
React component.forceUpdate()强制重新渲染方式
这篇文章主要介绍了React component.forceUpdate()强制重新渲染方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
通过React-Native实现自定义横向滑动进度条的 ScrollView组件
开发一个首页摆放菜单入口的ScrollView可滑动组件,允许自定义横向滑动进度条,且内部渲染的菜单内容支持自定义展示的行数和列数,在内容超出屏幕后,渲染顺序为纵向由上至下依次排列,对React Native横向滑动进度条相关知识感兴趣的朋友一起看看吧
2024-02-02
React styled-components设置组件属性的方法
这篇文章主要介绍了styled-components设置组件属性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
React Suspense 异步渲染完全指南
React Suspense为异步数据获取提供了一种全新的编程范式,本文主要介绍了React Suspense异步渲染完全指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2026-03-03
React组件设计过程之仿抖音订单组件
这篇文章主要介绍了React组件设计过程之仿抖音订单组件的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07