React - useEffect函数的理解和使用

这篇具有很好参考价值的文章主要介绍了React - useEffect函数的理解和使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一,useEffect描述

我们知道,react 的函数组件里面没有生命周期的,也没有 state,没有 state 可以用 useState 来替代,那么生命周期呢?

useEffectreact v16.8 新引入的特性。我们可以把 useEffect hook 看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个生命周期的组合。可以让你在函数式组件中执行一些副作用操作;

一般副作用操作有:

  1. 发送ajax请求
  2. 设置订阅 / 启动定时器
  3. 手动更改真实DOM

二,它的执行时机

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

componentDidMount(组件已经挂载)

componentDidUpdate(组件已经更新)

componentWillUnmount(组件即将卸载)

三,useEffect分情况使用

useEffect()有两个参数:第一个参数是要执行的回调函数,第二个参数是一个依赖项数组数组(根据需求第二个参数可选是否填写),根据数组里的变量是否变化决定是否执行函数;

先看下面简单的案例 ,下面会分情况讨论:

useEffect.js

import React, { useState, useEffect, useRef } from "react";

// 类型约定
interface interList {
  id: number | string; // 类型可能是number也可能是string
  text: string;
  done: boolean;
}
// 渲染数据
const myList: Array<interList> = [
  { id: 0, text: "参观卡夫卡博物馆", done: true },
  { id: 1, text: "看木偶戏", done: true },
  { id: 2, text: "打卡列侬墙", done: true }
];

const UseEffect: React.FC = (props: any) => {
  let [num, setNum] = useState(100);
  let [useInfo, SetUserInfo] = useState(myList);

   // 0,什么都不传 就是监听所有数据的变化
   useEffect(() => {
    console.log("我改变了-all");
  }); 

  // 1,此处相当于 componentDidUpdate生命周期 组件已经更新完成
  useEffect(() => {
    console.log("我改变了");
  }, [num]); // 只监听num的变化,useInfo的变化不会被监听到

  // 2,此处相当于componentDidMount生命周期 组件已经挂载完成
  useEffect(() => {
    console.log("componentDidMount");
    console.log("可以拿到num的值:", num);
  }, []);

  // 3,此处相当于 componentWillUnmount生命周期 组件即将卸载
  useEffect(() => {
    // 返回一个回调函数
    return () => {
      console.log("组件将要卸载了");
    };
  }, []);

  // 其实传不传空数组或不是空数组,useEffect函数里面的回调都会执行一次,也就是说componentWillUnmount这个生命周期页面进来就会执行
  // useEffect 这个hoosk也是可以写多个的,尽量不同的处理写在不同useEffect里面

  // 点击改变用户信息
  const change = () => {
    // react 建议不要更改原数组 返回一个数组的拷贝
    const newList = [...useInfo, { id: 3, text: "优菈", done: false }];
    SetUserInfo(newList);
  };

  // 点击加一
  const add = () => {
    setNum(++num);
  };

  const lis = useInfo.map((item, index) => {
    return (
      <li key={index}>
        {index}:{item.text}
      </li>
    );
  });

  return (
    <>
      <div>
        <h3>userEffect 副作用hooks函数</h3>
        <br />
        <button onClick={add}>点击加一</button>
        <p>{num}</p>
        <br />
        <button onClick={change}>改变用户信息</button>
        <ul>{lis}</ul>
      </div>
    </>
  );
};
export default UseEffect;

效果图:
React - useEffect函数的理解和使用,react.js,前端,前端框架

上面代码实现的效果很简单,两个按钮分别改变各自数据的状态,状态的改变会触发 useEffect函数的执行,第二个参数的传参影响着此函数的变化,所以下面进行分情况讨论:

1,不写第二个参数 说明监测所有state,其中一个变化就会触发此函数

若不写第二个参数,函数操作每次都会执行 useEffect(method)监测所有state,相当于 componentDidUpdate生命周期 - 组件已经更新完成。

   import {useEffect } from "react";
   useEffect(() => {
    console.log("我改变了-all");
  }); // 监听所有数据的变化

2,第二个参数如果是[]空数组,说明谁也不监测

第二个参数如果是[]空数组,说明谁也不监测,此时useEffect回调函数的作用就相当于
componentDidMount生命周期 - 组件已经挂载完成;

  // 2,此处相当于componentDidMount生命周期 组件已经挂载完成
  useEffect(() => {
    console.log("componentDidMount");
    console.log("可以拿到num的值:", num);
  }, []);

3,第二个参数如果只传需要监测的state,那只会根据此状态来执行函数

如果第二个参数中的数组只传了 num ,说明只有 num改变时,才会触发此useEffect回调函数,相当于对此数据的监听。

  // 1,此处相当于 componentDidUpdate生命周期 组件已经更新完成
  useEffect(() => {
    console.log("num改变了");
  }, [num]); // 只监听num的变化

当然数组里面也可以写多个([num,userInfo]),同时监听多个数据的变化。

4,useEffect 里面return一个回调函数,相当于组件即将卸载的声明周期

这句话什么意思呢?
通常,组件是有卸载的生命周期的,使用useEffect 函数只需在里面return一个回调函数,这个回调函数就相当于componentWillUnmount 声明周期,可以在里面清除创建的订阅或计时器 ID 等资源。

  // 3,此处相当于 componentWillUnmount生命周期 组件即将卸载
  useEffect(() => {
    // 返回一个回调函数
    return () => {
      console.log("组件将要卸载了");
    };
  }, []);

这里传了空数组说明我不想监听数据的变化,只想在卸载组件的时候执行该逻辑;

5,注意

其实第二个传不传空数组或不是空数组,useEffect函数里面的回调都会执行一次,也就是说页面进来就会自动执行componentWillUnmount这个生命周期;

useEffect函数 这个hoosk也是可以写多个的,尽量不同的业务处理写在不同useEffect里面;文章来源地址https://www.toymoban.com/news/detail-649848.html

到了这里,关于React - useEffect函数的理解和使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 简介:在这篇教程中,我们将使用React.js框架创建一个简单的聊天机器人的前端界面,并利用Dialogflo

    作者:禅与计算机程序设计艺术 介绍及动机 聊天机器人(Chatbot)一直是互联网领域中的热门话题。而很多聊天机器人的功能都依赖于人工智能(AI)技术。越来越多的企业希望拥有自己的聊天机器人系统,从而提升自己的竞争力。为此,业界也出现了很多基于开源技术或云

    2024年02月06日
    浏览(57)
  • 【React】useEffect使用详解

    如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。 componentDidMount 组件挂载 componentDidUpdate 组件更新 componentWillUnmount 组件将要摧毁 使用方法 情况一: useEffect需要传递两个参数,第一个参数是

    2024年02月03日
    浏览(44)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(91)
  • react useState useEffect useMemo实际业务场景中的使用

    下面的代码实现了上面图片的功能

    2024年02月16日
    浏览(42)
  • react之Hooks的介绍、useState与useEffect副作用的使用

    Hooks 是 React v16.8 中的新增功能 为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性 注意:Hooks 只能在函数组件中使用,自此,函数组件成为 React 的新宠儿 可以在项目中同时使用hooks和class 一个 Hook 就是一

    2024年02月12日
    浏览(38)
  • react中使用redux,但是通过useEffect监听不到redux中的数据变化?

    在React中使用Redux并通过useEffect监听Redux中的数据变化时,需要使用 react-redux 库中的 useSelector 钩子来选择需要监听的Redux状态。 useSelector 函数允许您从Redux存储中选择和获取特定的状态。 以下是一种在React组件中使用Redux,并通过useEffect监听Redux中的数据变化的常见方法: 首先

    2024年02月16日
    浏览(48)
  • react的严格模式 和 解决react useEffect执行两次

    这个问题,主要是刚接触react的时候发的问题,当时也没总结。现在回过头来再总结一次!!! 能发现这个问题的👨‍🎓,一定是一名细心并且有一颗求知的❤️。 因为我当时接触React的时候就是这样的想法。 为什么会触发两次?按照正常的声明周期应该执行一次的!!!

    2024年02月04日
    浏览(36)
  • React的hooks---useEffect

    在函数组件主体内(React 渲染阶段)改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的,因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性 useEffect Hook 的使用则是用于完成此类副作用操作。 useEffect 接收一个包含命令式、且可能有副

    2024年02月15日
    浏览(36)
  • React Hooks 源码解析:useEffect

    React Hooks 源码解析(4):useEffect React 源码版本: v16.11.0 源码注释笔记:airingursb/react 1.1 为什么要有 useEffect 我们在前文中说到 React Hooks 使得 Functional Component 拥有 Class Component 的特性,其主要动机包括: 在组件之间复用状态逻辑很难 复杂组件变得难以理解 难以理解的 class 对

    2024年01月21日
    浏览(41)
  • 【React 】useLayoutEffect 和 useEffect的区别

    useLayoutEffect 和 useEffect 是React中常用的两个Hook,它们的主要区别在于触发时机。 useEffect 会在渲染完成后异步执行,不会阻塞浏览器的绘制操作。它适用于需要在组件渲染后执行副作用的情况,例如数据的获取、订阅事件等。它不会阻止屏幕更新,因此可能会导致渲染的一次

    2024年02月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包