React useEffect使用

第一

export default function App() {

  const [name,setname] = useState('huhu')

  useEffect(()=>{

    setname(name.substring(0,1).toUpperCase()+name.substring(1))

  },[name])

  //[name,age]//可以有多个参数

  //带参数,第一次默认执行一次,第二次name更新也会执行

  return (

    <div>

      app={name}

      <button onClick={()=>{

        setname('xiaoming')

      }}>

        click

      </button>

    </div>

  )

}

第二

import React, { Component, useEffect } from 'react'

export default class App extends Component {

  state = {

    isCreate : true

  }

  render() {

    return (

      <div>

        <button onClick={()=>{

          this.setState({

            isCreate:!this.state.isCreate

          })

        }}>点击</button>

        {/* { this.state.isCreate?<Child />:'' } */}

        { this.state.isCreate && <Child /> }

      </div>

    )

  }

}

function Child(props){

  useEffect(()=>{

    window.onresize = ()=>{

      console.log('resize')

    }

    var timer = setInterval(() => {

      console.log(1234)

    }, 1000);

// 点击之后只执行一次

    return()=>{

      console.log('组件销毁')

      window.onresize = null;

      clearInterval(timer)

    }

  },[])

  return <div>

    child

  </div>

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/663223.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

留学生怎么合理使用ChatGPT ?还有哪些同类工具可以使用?

一篇篇相关于ChatGPT的文章陆陆续续铺天盖地的出现在我们面前。今天我们来看看怎么使用这个宝藏工具&#xff01; 文章主要内容为&#xff1a; 1.它是什么&#xff1f; 2.它能做什么&#xff1f; 3.作为留学生我们怎么使用它&#xff1f; 4.其他同类工具推荐 5.个人观点 一…

unity addressables 加载资源和场景 显示进度条(主要用于WebGL)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、addressables是什么&#xff1f;二、导入Addressables三、创建Addressables Settings 资产包管理四、资源打包五、环境模拟六、查看重复资源七、选择Bundle…

算法——A/算法通识

目录 一、复杂度分析 A/时间复杂度 B/空间复杂度 C/分析技巧 二、枚举分析 A/枚举算法介绍 B/解空间的类型 C/循环枚举解空间 三、模拟算法 四、递归 A/递归介绍 递归的两个关键要素&#xff1a; B/递归如何实现 C/递归和循环的比较 一、复杂度分析 A/时间复杂度…

央视见证|“看见中国汽车”走进首家汽车供应链企业东软睿驰

由工业和信息化部支持指导&#xff0c;中国汽车工业协会和央视网联合出品的2023《看见中国汽车》专题东软睿驰篇正式上线&#xff0c;记录品牌向上专项行动走进首家汽车供应链企业&#xff0c;展示东软睿驰围绕“成为OEM 软件定义汽车时代最可信赖的合作伙伴”核心战略的创新发…

深入探索Java BIO与NIO输入输出模型:基于文件复制和socket通信

在Java中&#xff0c;处理I/O&#xff08;输入/输出&#xff09;操作的方式经历了从BIO&#xff08;Blocking I/O&#xff0c;阻塞式I/O&#xff09;到NIO&#xff08;New I/O 或 Non-blocking I/O&#xff0c;新I/O或非阻塞式I/O&#xff09;的演变。这两种模型在设计和使用上…

[C++]类和对象(中)

一:类的六个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。空类中并不是什么都没有&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器会生成的成员函数称为…

使用Python的Turtle模块简单绘制烟花效果

import turtle import random# 初始化屏幕 screen turtle.Screen() screen.bgcolor("black") screen.title("烟花模拟")# 创建一个Turtle来绘制烟花 firework turtle.Turtle() firework.hideturtle() firework.speed(0) # 设置绘图速度为最快# 绘制烟花…

GEDepth:Ground Embedding for Monocular Depth Estimation

参考代码&#xff1a;gedepth 出发点与动机 相机的外参告诉了相机在世界坐标系下的位置信息&#xff0c;那么可以用这个外参构建一个地面基础深度作为先验&#xff0c;后续只需要在这个地面基础深度先验基础上添加offset就可以得到结果深度&#xff0c;这样可以极大简化深度估…

springboot与springcloud之间的版本对应关系

https://start.spring.io/actuator/info 当然&#xff0c;你可以直接在&#xff1a; https://spring.io/projects/spring-cloud 上看文档查询&#xff0c; 不过&#xff0c;最后应该是调到这里的&#xff1a; https://github.com/spring-cloud/spring-cloud-release/wiki/Suppo…

C++:输入流/输出流

C流类库简介 C为了克服C语言中的scanf和printf存在的缺点。&#xff0c;使用cin/cout控制输入/输出。 cin&#xff1a;表示标准输入的istream类对象&#xff0c;cin从终端读入数据。cout&#xff1a;表示标准输出的ostream类对象&#xff0c;cout向终端写数据。cerr&#xff…

stable diffusion微调总结

stable diffusion微调总结 stable diffusion模型类别&#xff1a;SDSD2SDXLSDXL LCM&#xff08;潜在一致性模型&#xff09;SDXL DistilledSDXL Turbo 安装accelerate通过pip安装配置 accelerate config查看配置 安装diffusers数据处理BLIP模型优化 微调方法Dreambooth微调准备…

静态代理IP是如何助力跨境电商运营的?

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

微信小程序 安卓/IOS兼容问题

一、背景 在开发微信小程序时&#xff0c;不同的手机型号会出现兼容问题&#xff0c;特此记录一下 二、安卓/IOS兼容问题总结 2.1、new Date()时间转换格式时&#xff0c;IOS不兼容 问题&#xff1a;在安卓中时间格式2024-1-31 10:10:10&#xff0c;但是在iOS中是不支持 &q…

jQuery前段开发--星级评价和图形跟随指针移动

一、实验原理&#xff1a; 当鼠标移入某个星星&#xff0c;前面的星星都会被点亮&#xff1b;当鼠标移出&#xff0c;星星将会变暗&#xff0c;单击某个星星后&#xff0c;即可完成评论&#xff0c;此时鼠标移出后&#xff0c;被单击星星前面的星星都会被点亮&#xff0c;后面…

算法训练营day20,二叉树9

type TreeNode struct { Val int Left *TreeNode Right *TreeNode } //669. 修剪二叉搜索树 //本题与450. 删除二叉搜索树中的节点 相似&#xff0c;不同之处在于本题删除不止一个节点&#xff0c;450不需要遍历全部二叉树&#xff0c;但本题需要全部遍历&#xff0c;而且…

数据结构—静态查找

简介 1. 数据的组织和查找是大多数应用程序的核心 2. 线性表、树、图是数据的组织结构 3. 查找是所有数据处理中最基本、最常用的操作 4. 当在一个庞大数量的数据集合中查找时&#xff0c;查找方法和效率就显得格外重要 查找介绍 1. 查找包含四种操作&#xff1a;查询、检…

幻兽帕鲁社区服务器搭建架设开服教程(LINUX)

幻兽帕鲁社区服务器搭建架设开服教程&#xff08;LINUX&#xff09; 大家好我是艾西&#xff0c;上一期我给大家分享了windows系统版本的幻兽帕鲁服务器搭建教程。因为幻兽帕鲁这游戏对于服务器的配置有一定的要求很多小伙伴就思考用linux系统搭建的话占用会不会小一点&#x…

华为云CodeArts Snap荣获信通院优秀大模型案例及两项荣誉证书

2024年1月25日&#xff0c;中国人工智能产业发展联盟智能化软件工程工作组&#xff08;AI for Software Engineering&#xff0c;下文简称AI4SE&#xff09;在京召开首届“AI4SE创新巡航”活动。在活动上&#xff0c;华为云大模型辅助系统测试代码生成荣获“2023AI4SE银弹优秀案…

cortexM c语言和汇编嵌套编程

编程环境是:stm32cubeIde 原因:很多操作需要使用底层来做,比如中断时的上下文数据保存。也就是说用到汇编来实现。 疑问:c语言怎么才能跟汇编很好的兼容在一起呢?必将是我下一步的必经探索之路了。 一、C语言和汇编兼容格式 asm( 汇编字符串 : 输出约束字符串 …

C++哈希表map映射

开房门 时间限制&#xff1a;1.000S 空间限制&#xff1a;128MB 题目描述 假设你手里有一串钥匙&#xff0c;这串钥匙上每把钥匙都有一个编号&#xff0c;对应着一个房门的编号。现给你一个房门编号&#xff0c;你需要判断是否能够打开该房门。 输入描述 测试数据共有多组…