React Hook入门小案例 在函数式组件中使用state响应式数据

news2024/11/18 7:44:19

Hook是react 16.8 新增的特性
是希望在不编写 class的情况下 去操作state和其他react特性
Hook的话 就不建议大家使用class的形式了 当然也可以用 这个他只是不推荐

我们还是先创建一个普通的react项目

我们之前写一个react组件可以这样写

import React from "react";
export default class AppRouter extends React.Component{

    render(){
        return (
            <div>
                Hello World
            </div>
        )
    }
}

简单说 就是声明一个类对象 然后在里面 写组件的基本内容

然后 就还有一种函数式的写法

import React from "react";
function dom1(){
    return (
        <div>
            Hello World
        </div>
    )
}

export default dom1

这两种写法界面效果没有什么不同
在这里插入图片描述
甚至我们直接这样写

import React from "react";
export default () => {
    return (
        <div>
            Hello World
        </div>
    )
}

也是可以出界面的
在这里插入图片描述
但是 这样问题就来了 我们在这里面是没办法 创建 state和生命周期的

在中我们可以这样写

import React from "react";
import axios from "axios";

export default class AppRouter extends React.Component{
    state = {
        name: "小猫猫"
    }

    render(){
        return (
            <div>
                { this.state.name }
            </div>
        )
    }
}

这样 就可以创建state
但函数这样去声明显然是没用的

那么 我们皆可以这样写

import React, { useState } from "react";

const MyComponent = () => {
  const [name] = useState("小猫猫");

  return (
    <div>
      {name}
    </div>
  );
};

export default MyComponent;

运行结果如下
在这里插入图片描述
这样 我们这种函数式就能用State数据了
然后 我们修改他也可以

import React, { useState } from "react";

const MyComponent = () => {
  const [name,setName] = useState("小猫猫");

  return (
    <div>
      {name}
      <button onClick={ ()=> { setName("大猫猫")} }>更改</button>
    </div>
  );
};

export default MyComponent;

注意 他这里修改数据的方法是你在声明变量时一起声明的 你要它叫什么 他就叫什么

例如 我这里 声明name变量 然后修改的值的函数 我声明叫 setName 你也可以写其他名字
然后我们点击按钮调用setName 参数就是要更改后的新值

我们运行代码
在这里插入图片描述
然后点击更改按钮
在这里插入图片描述
我们的变量就改变了

然后 我们来写两个值

import React, { useState } from "react";

const MyComponent = () => {
  const [name,setName] = useState("小猫猫");
  const [age,setAge] = useState(2);

  return (
    <div>
      {name}
      {age}
      <button onClick={ ()=> { setName("大猫猫")} }>更改</button>
      <button onClick={ ()=> { setAge(age+1)} }>又一年</button>
    </div>
  );
};

export default MyComponent;

运行项目
在这里插入图片描述
我们更改和又一年都点一下
在这里插入图片描述
也是没有任何问题

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

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

相关文章

Java学习笔记(视频:韩顺平老师)2.0

如果你喜欢这篇文章的话&#xff0c;请给作者点赞哟&#xff0c;你的支持是我不断前进的动力。 因为作者能力水平有限&#xff0c;欢迎各位大佬指导。 变量 基本数据类型⭐️ 数值型 基本数据类型转化 自动类型转换 强制类型转换 基本数据类型和String类型转换 变量 变量…

Vulnhub靶机渗透:MY FILE SERVER: 1

MY FILE SERVER: 1 nmap扫描端口扫描服务扫描漏洞扫描选择渗透方向 21/2121 ftp445 samba2049/20048 nfs80 http目录爆破 获得立足点提权4061140847 获取flag 靶机链接: https://www.vulnhub.com/entry/my-file-server-1,432/ 靶机IP&#xff1a;192.168.54.33 kali IP&#x…

人工智能轨道交通行业周刊-第48期(2023.6.5-6.11)

本期关键词&#xff1a;铁路测绘、动车组限速、铁路四电、智源大会、苹果AR眼镜、AIGC商业落地 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通RailMet…

如何通过绩效考核对互联网人精准打击条条致命?

在“经济形势就业压力”的双重打击下&#xff0c;打工人变得越来越温顺。曾经闹着要整顿职场的大多年轻人&#xff0c;也从年少轻狂逐步走向少年老成&#xff0c;突然少了许多“XX后整顿职场”这样的声音。在严峻的复杂形势下&#xff0c;大多公司为了降本增效&#xff0c;殚精…

2017~2018学年《信息安全》考试试题(A3卷)

北京信息科技大学 2017 ~2018 学年第一学期 《信息安全》考试试题 (A3 卷) 课程所在学院&#xff1a;计算机学院 适用专业班级&#xff1a; - 考试形式&#xff1a;闭卷 一、单选题(本题满分 20 分&#xff0c;共含 10 道小题&#xff0c;每小题 2 分) Wanncry 勒索攻击通过加…

LLM下的讨论230611

三、我们能研究什么&#xff1f; 在大模型时代&#xff0c;可以考虑深挖的方向&#xff0c;供大家参考&#xff1a; 3.1 Retrieval augmented in-context learningGPTs完成了NLP范式的更新迭代&#xff1a;从传统的有监督学习&#xff08;Supervised Learning&#xff09;转变…

有趣的图(一)(55)

小朋友们好&#xff0c;大朋友们好&#xff01; 我是猫妹&#xff0c;一名爱上Python编程的小学生。 和猫妹学Python&#xff0c;一起趣味学编程。 今日主题 咱们今天的内容比较抽象&#xff0c;也比较有趣。 这里的图是指计算机中的图&#xff0c;确切地说&#xff0c;是…

Debian 12 x86_64 OVF (sysin) - 虚拟机自动化模板

Debian 12 x86_64 OVF (sysin) - VMware 虚拟机模板 请访问原文链接&#xff1a;https://sysin.org/blog/debian-12-ovf/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org Debian GNU/Linux 12 (bookworm) (Linux debian 6.1.0-…

面试20k的测试工程师什么水平?知彼知己百战不殆...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 面试软件测试你需…

一文看懂python如何执行cmd命令

概要 “ 在进行Python编程时&#xff0c;经常需要使用到操作系统的命令行&#xff0c;这就要求我们学会如何使用Python执行cmd命令。” Python执行cmd命令的几种方法 Python是一种强大而灵活的编程语言&#xff0c;它可以很方便地执行系统命令&#xff0c;与操作系统进行交互。…

软件测试人员灵魂三问

可有过高光时刻&#xff1f;职业立足点是什么&#xff1f;前路在何方&#xff1f; 没有光高时刻的职业&#xff0c;不值得留恋 根据马斯洛需求层次理论&#xff0c;当人们温足饭饱后&#xff0c;还需要尊重和自我实现。 同样&#xff0c;作为测试员&#xff0c;工作不仅仅是…

I2C通信协议,最简单的总线通信

串口通信只能在两个设备之间进行&#xff0c;如果是四组串口通信&#xff0c;那每个设备都需要三组串口&#xff0c;其线路连接相当繁琐&#xff08;如下图&#xff09;。 为了解决这个痛点&#xff0c;人们设计了一种总线通信&#xff0c;总线通信有很多种协议&#xff08;如…

记一次gstreamer解码存图绿线问题排查

背景 业务需求需要将某些解码后的视频帧保存为图片&#xff0c;大部分情况下图片都是正常的&#xff0c;更换了某些视频流后&#xff0c;在保存的图片顶部就会出现一条绿线&#xff0c;现记录下解决过程。 部分代码如下 解码回调如下&#xff0c;完整代码可参考之前的文章G…

JVM零基础到高级实战之内存区域分布与概述

JVM零基础到高级实战之内存区域分布与概述 JVM零基础到高级实战之内存区域分布与概述 文章目录 JVM零基础到高级实战之内存区域分布与概述前言Java语言为甚么优势巨大&#xff1f;总结 前言 JVM零基础到高级实战之内存区域分布与概述 Java语言为甚么优势巨大&#xff1f; 一处…

FMCW 雷达室内多目标人员MATLAB仿真

分享一则代码&#xff0c;主要用于FMCW雷达室内多目标MATLAB仿真&#xff0c;涉及到的内容和算法模块有如下&#xff1a; 1、目标参数设置 2、雷达参数设置 3、目标运动状态设置 4、雷达信号建模&#xff08;IQ信号&#xff09; 5、雷达近场收发几何位置偏差校正 6、距离维FFT…

速刷剑指offer

链接&#xff1a;No5、 用两个栈来实现一个队列 | 阿秀的学习笔记 第五题跳过。栈和队列等着代码随想录二刷补上。 JZ11 旋转数组的最小数字 链接&#xff1a;旋转数组的最小数字_牛客题霸_牛客网 代码&#xff1a; 这个二分法是左闭右开的&#xff0c;就真的不好理解。 class …

Vue - 第五天 动态组件 插槽 自定义指令

动态组件& 插槽& 自定义指令 一、动态组件1.什么是动态组件2.如何实现动态组件渲染3.使用 keep-alive 保持状态4. keep-alive 对应的生命周期函数5. keep-alive 的 include 属性6.动态展示左右组件7.例子 二、插槽1.什么是插槽2.体验插槽的基础用法2.1 没有预留插槽的内…

VGGNet

论文信息 论文名称&#xff1a;Very Deep Convolutional Networks For Large-Scale Image Recognition 论文地址&#xff1a;https://arxiv.org/pdf/1409.1556.pdf 发表期刊&#xff1a; ICLR 发表年份&#xff1a; 2015 论文详情&#xff1a;VGGNet是2014年ILSVRC&#xff08…

【并发篇】04-05 线程池核心参数代码演示

B站 黑马程序员 java八股的视频笔记 自留备忘 如有错误请多多指教。 &#xff08;一&#xff09;理论知识 这道题其实就是在问java中线程池的实现类ThreadPoolExecutor&#xff0c;这个类参数最多的构造方法有7个参数。 线程池本质上就是管理一组线程&#xff0c;用来执行提交…

python:消除已安装库在import导入时出现红线问题

问题 在pycharm中&#xff0c;对于已经安装的库文件&#xff0c;在进行import导入时出现红线&#xff0c;不影响运行&#xff0c; 简单有效的消除红线的方法。 解决办法 在工程目录中的程序可以采用Mark directory - Source Root方法。 对于安装的第三方库文件环境不在本工程…