函数组件 hook--useEffect

新星_2024-11-01 21:29

useEffect

react的函数组件里面没有生命周期，也没有state，没有state 可以用 useState 来替代。

useEffect可以看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个生命周期的组合，可以覆盖这些生命周期函数组合起来使用的所有场景。useEffect是定义副作用的，可以在函数组件中执行一些副作用操作。

执行时机

useEffect可以看做三个生命周期函数的组合，也就是在以下时候会执行

componentDidMount（组件已经挂载）

componentDidUpdate（组件已经更新）

componentWillUnmount（组件即将卸载）

副作用

函数的副作用就是函数中除了操作函数内部的变量执行业务还操作了函数外部变量来执行业务。

react项目中，一般副作用操作有：

  1. 发送ajax请求
  2. 调用浏览器的API（比如启动定时器、浏览器的存储信息localStorage.getItem()等）
  3. 手动更改真实DOM

useEffect使用

useEffect()有两个参数：第一个参数是要执行的回调函数也就是需要执行的操作，它是必填参数，第二个参数是一个依赖项数组，根据数组里的变量是否变化决定是否执行函数（根据需求第二个参数决定是否填写，它是可选的）

js 复制代码 
import {useEffect} from "react"
useEffect(effect，dependencies)

useEffect根据第二个参数的传参有不同的作用：

  • 不传第二个参数相当于componentDidMount和componentDidUpdate
  • 第二个参数传空数组相当于componentDidMount
  • 第二个参数数组中存放某个变量相当于watch监听

useEffect的第一个参数Effect是要执行的副作用函数，它可以是任意的自定义函数，可以在这个函数里面操作一些浏览器的API或者和外部环境进行交互比如网络请求等。这个函数会在每次组件渲染完成之后被调用，组件每渲染一次该函数就自动执行一次。在组件的页面首次DOM 加载后，副作用函数也会执行。

useEffect的第二个参数dependencies用于限制该副作用的执行条件，使用一个数组指定副作用函数的依赖项，只有依赖项发生变化，才会重新渲染。如果第二个参数是一个空数组，就表明副效应参数没有任何依赖项。因此，副作用函数这时只会在组件首次加载完成后执行一次，后面组件重新渲染，就不会再次执行。

不传第二个参数举例说明

js 复制代码 
import { useEffect,useState } from 'react'

function App() {
  let [count,setCount] = useState(0);
  const addHandle = () => {
    let num = count++;
    setCount(num);
  };
  // 第一个参数是一个回调函数，必填项
  useEffect(() => {
    console.log("effect")
  });
  return (
    <>
     <h1>App</h1>
     <p>{count}</p>
     <button onClick={addHandle}>add</button>
    </>
  )
}

export default App

控制台第一次输出表示在组件挂载后执行了useEffect的回调函数，相当于componentDidMount的作用。之后点击按钮修改了数据，在组件更新后useEffect的回调函数再次触发，相当于componentDidUpdate的作用。

第二个参数传入空数组举例说明

js 复制代码 
import { useEffect,useState } from 'react'

function App() {
  let [count,setCount] = useState(0);
  const addHandle = () => {
    let num = count++;
    setCount(num);
  };
  // 第一个参数是一个回调函数，必填项
  useEffect(() => {
    console.log("effect")
  },[]);
  return (
    <>
     <h1>App</h1>
     <p>{count}</p>
     <button onClick={addHandle}>add</button>
    </>
  )
}

export default App

控制台第一次输出表示在组件挂载后执行了useEffect的回调函数，相当于componentDidMount的作用。之后点击按钮修改了数据，在组件更新后useEffect的回调函数没有再次执行。

js 复制代码 
import {useState,useEffect} from 'react'
export default function App() {
  let [objarr,setObjarr]=useState([]);
  useEffect(()=>{
    console.log('App组件对应的模板在页面中加载完成时调用');
    fetch('http://127.0.0.1:7001/test')
    .then(res=>res.json())
    .then(data=>{
      console.log(data,111);
      setObjarr(data)
    });
  });
  return (
    <div>
      {
        objarr.map((el,index)=>{
          return(
            <div key={index}>
              <p>{el.title}</p>
              <p>{el.author}</p>
            </div>
          )
        })
      }
      <p>App组件</p>  
    </div>
  )
}

在组件第一次加载时网络请求，没有设置依赖项为空数组，就会一直发起网络请求。setObjarr(data)每一次都会得到一个新的引用数据然后刷新页面，就会一直发起网络请求，如果后端发送的数据每次都是不同的就会一直刷新页面就容易造成项目进入死循环。
所以需要设置第二个参数是一个空数组，这样副作用函数只会在组件首次加载后执行一次，后面组件重新渲染，就不会再次执行

js 复制代码 
import {useState,useEffect} from 'react'
export default function App() {
  let [objarr,setObjarr]=useState([]);
  useEffect(()=>{
    console.log('App组件对应的模板在页面中加载完成时调用');
    fetch('http://127.0.0.1:7001/test')
    .then(res=>res.json())
    .then(data=>{
      console.log(data,111);
      setObjarr(data)
    });
  },[]);
  return (
    <div>
      {
        objarr.map((el,index)=>{
          return(
            <div key={index}>
              <p>{el.title}</p>
              <p>{el.author}</p>
            </div>
          )
        })
      }
      <p>App组件</p>  
    </div>
  )
}

第二个参数数组中存放state数据

js 复制代码 
import { useEffect,useState } from 'react'

function App() {
  let [count,setCount] = useState(0);
  let [msg,setMsg] = useState("hello");
  const addCount = () => {
    setCount(count++);
  };
  const changeHandle = () => {
    setMsg("hello world");
  };
  // 第一个参数是一个回调函数，必填项
  useEffect(() => {
    console.log("effect")
  },[msg]);
  return (
    <>
     <h1>App</h1>
     <p>{msg}</p>
     <p>{count}</p>
     <button onClick={addCount}>add</button>
     <button onClick={changeHandle}>change</button>
    </>
  )
}

export default App

控制台第一次输出表示在组件挂载后执行了useEffect的回调函数，相当于componentDidMount的作用。之后修改了监听的state数据，在组件更新后useEffect的回调函数再次执行。而修改了其他数据，此时useEffect的回调函数也不会执行。
此时和vue的watch监听是有区别的，vue的watch监听默认是一开始不会执行回调函数的，而使用useEffect来监听某个数据，开始就会执行一次回调函数，类似于componentDidMount的作用。

当然数组里面也可以写多个（[数据1,数据2]），同时监听多个数据的变化。

js 复制代码 
import { useEffect,useState } from 'react'

function App() {
  let [count,setCount] = useState(0);
  let [msg,setMsg] = useState("hello");
  const addCount = () => {
    setCount(count++);
  };
  const changeHandle = () => {
    setMsg("hello world");
  };
  // 第一个参数是一个回调函数，必填项
  useEffect(() => {
    console.log("effect");
    console.log(count,msg)
  },[msg,count]);
  return (
    <>
     <h1>App</h1>
     <p>{msg}</p>
     <p>{count}</p>
     <button onClick={addCount}>add</button>
     <button onClick={changeHandle}>change</button>
    </>
  )
}

export default App

清除页面的副作用

副作用是随着组件加载而发生的，那么组件卸载时，可能需要清理这些副效应。 useEffect()允许返回一个函数，在组件卸载时清理副作用。如果不需要清理副作用，useEffect()就不用返回任何值。

js 复制代码 
import { useEffect } from 'react'
export default function Des() {
     useEffect(() => {
        setInterval(() => {
          console.log('Des组件对应的模板在页面中加载完成时调用');
       }, 1000);
    });
    return (
        <div>Des组件</div>
    )
}
js 复制代码 
import {useState} from 'react'
import Des from './Des.jsx'
export default function App() {
  let [flag,setFlag]=useState(true);
  let change=()=>{
    setFlag(false)
  }
  return (
    <div>
      <p>App组件</p>
      {flag&&<Des></Des>}
      {/* flag为true时，会执行后面的表达式，逻辑与表达式的值就是后面表达式的返回值显示Des组件 */}
      {/* flag为false时，不会执行后面的表达式，不会显示Des组件 */}
      <button onClick={change}>销毁Des组件</button>
    </div>
  )
}

Des组件被销毁了，但是组件中的副作用依然存在，所以需要在组件卸载时清理副作用。

js 复制代码 
import { useEffect } from 'react'

export default function Des() {
    useEffect(() => {
       let timer=setInterval(() => {
            console.log('Des组件对应的模板在页面中加载完成时调用');
        }, 1000);
        return ()=>{
            clearInterval(timer);
        }
    });
    return (
        <div>Des组件</div>
    )
}
js 复制代码 
import {useState} from 'react'
import Des from './Des.jsx'
export default function App() {
  let [flag,setFlag]=useState(true);
  let change=()=>{
    setFlag(false)
  }
  return (
    <div>
      <p>App组件</p>
      {flag&&<Des></Des>}
      {/* flag为true时，会执行后面的表达式，逻辑与表达式的值就是后面表达式的返回值显示Des组件 */}
      {/* flag为false时，不会执行后面的表达式，不会显示Des组件 */}
      <button onClick={change}>销毁Des组件</button>
    </div>
  )
}

Des组件在销毁时，返回的函数被执行了，组件中的副作用就被清除了。

总结

  • useEffect(() => { })：第一个参数回调函数每次组件渲染都执行
  • useEffect(() => { return () => { } }, [ ])：第一个参数回调函数只在组件首次渲染执行。当组件移除时触发清除副作用的函数，即执行return的函数
  • useEffect(() => { return () => { } }, [count])：第一个参数回调函数在组件首次渲染执行以及count改变才会执行。当组件移除时触发清除副作用的函数。这里的依赖项可以填任何数据类型，只要依赖项发生变化才会重新运行第一个参数回调函数。
  • 一个函数组件中可以使用多个副作用函数，尽量不同的业务处理写在不同useEffect里面。
相关推荐
小牛itbull4 小时前
ReactPress：重塑内容管理的未来
react.js·github·reactpress
FinGet15 小时前
那总结下来，react就是落后了
前端·react.js
王解18 小时前
Jest项目实战(2)： 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语1 天前
免费，基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0012 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解2 天前
Jest进阶知识：深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull2 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫2 天前
react中得类组件和函数组件有啥区别，怎么理解这两个函数
前端·react.js·前端框架
用户8185216881172 天前
react项目搭建create-router-dom，redux详细解说
react.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play