React:useState和useEffect

最近因为想要开发一个简单的应用才开始接触React。但是并没有系统学习React,所以这篇博客可能会写的不够专业。

1. Hooks

  在程序设计语言中,钩子(hook)是一种机制,它可以允许程序在某些预定的事件或位置执行特定的代码。在React中,Hooks 是一种让你在函数组件中添加状态(state)和其他 React 特性(如生命周期方法等)的函数。
  本篇主要介绍React中的useStateuseEffect两种钩子。

2. useState

  useState 是 React 中的一个 Hook,用于在函数组件中添加状态管理。它允许你在函数组件中声明状态变量,并提供更新这些状态变量的方法。其用法简单举例如下:

import React, { useState } from 'react';
function Counter() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
export default Counter;

上述代码中定义了一个状态变量count,每次点击按钮后会触发setCount方法会更新该状态变量。

2.1 状态变量类型

  useState可以用于管理任意类型的状态变量,包括数字、字符串、布尔值、对象、数组、函数以及null。依次举例如下:

const [count, setCount] = useState(0); //数值
const [name, setName] = useState('John');//字符串
const [isOn, setIsOn] = useState(false);//bool型
const [user, setUser] = useState({ name: 'John', age: 30 });//object类型
const [todos, setTodos] = useState(['Learn Hooks', 'Build a project']);
//array类型
const [getTime, setGetTime] = useState(() => () => new Date().toLocaleTimeString());//function类型
const [data, setData] = useState(null);//null型

这里要注意一点,useState语句通常放在函数组件的顶层,而不是放在条件语句、循环或者嵌套函数中。这样做是为了确保每次渲染时 Hook 的调用顺序一致,从而让 React 正确地管理状态和副作用。

2.2 更新状态变量

  使用useState定义的状态变量都同时有一个set类方法用来更新变量。具体的状态变量更新方法如下:

  • 直接赋值更新
//触发incremen方法时会更新状态变量
const increment = () => {setCount(count + 1); // 直接传入新的状态值
};
  • 使用回调函数更新(参数名称可以自定义,但是通常建议使用prevxxx型的变量名称)。
const decrement = () => {setCount(prevState => prevState - 1); // 使用回调函数基于当前状态更新
};
const addItem = () => {
// ...prevItems 表示将prevItems数组中的所有元素展开,然后再添加一个 newItem 元素,形成一个新的数组setItems(prevItems => [...prevItems, `Item ${prevItems.length + 1}`]);
};

3. useEffect

  useEffect 用于在函数组件中执行副作用操作(side effects)。副作用操作包括数据获取、订阅或手动操作 DOM。useEffect 可以在组件渲染后执行这些操作。其基本结构如下:

useEffect(() => {// 在这里执行副作用操作return () => {// 在组件卸载时执行清除操作(可选)};}, []); // 第二个参数是依赖数组,用来控制副作用的执行时机

参数说明:

  • 副作用函数: 第一个参数是一个函数,该函数包含要执行的副作用操作。它可以包含数据获取、订阅或手动操作 DOM 等异步操作。
  • 依赖数组: 第二个参数是一个数组,用来指定依赖项。只有当依赖项发生变化时,才会重新执行 useEffect 中的副作用函数。如果不传递依赖数组,则每次组件更新时都会执行副作用函数。
  • 清除函数: 副作用函数可以返回一个清除函数,用于在组件卸载时执行清理操作,比如取消订阅或清除定时器。

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

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

相关文章

水平自动扩容和缩容HPA、Networkpolicy、kubernetes用户安全控制和kubernetes创建普通用户(2024-07-10)

一、水平自动扩容和缩容HPA HPA全称是Horizontal Pod Autoscaler&#xff0c;翻译成中文是POD水平自动伸缩&#xff0c;HPA可以基于CPU利用率对replication controller、deployment和replicaset中的pod数量进行自动扩缩容&#xff08;除了CPU利用率也可以基于其他应程序提供的…

LLM 合成数据生成完整指南

大型语言模型是强大的工具&#xff0c;不仅可以生成类似人类的文本&#xff0c;还可以创建高质量的合成数据。这种能力正在改变我们进行 AI 开发的方式&#xff0c;特别是在现实世界数据稀缺、昂贵或隐私敏感的情况下。在本综合指南中&#xff0c;我们将探索 LLM 驱动的合成数据…

DP讨论——建造者模式

学而时习之&#xff0c;温故而知新。 敌人出招&#xff08;使用场景&#xff09; 组合关系中&#xff0c;如果要A对象创建B对象&#xff0c;或者要A对象创建一堆对象&#xff0c;这种是普遍的需求。 你出招 这种适合创建者模式&#xff0c;我感觉也是比较常见的。 构造函数…

速盾:如何加强网站的安全性

随着互联网的快速发展&#xff0c;网站的安全性变得越来越重要。CDN&#xff08;内容分发网络&#xff09;是一种常见的网络加速服务&#xff0c;它可以将网站的静态内容分发到全球各地的服务器上&#xff0c;以提供更快的访问速度。然而&#xff0c;CDN 也存在一些安全风险&am…

C语言——流程控制:if...else、switch...case

控制类语句&#xff1a; 逻辑运算符&#xff1a; 选择语句&#xff1a; if...else&#xff1a; if&#xff08;&#xff09;括号内的内容终究会被转换成0,1&#xff0c;满足的话即为1&#xff0c;不满足的话为0。因此要注意&#xff0c;&#xff08;&#xff09;括号内因为条件…

简单实现一个本地ChatGPT web服务(langchain框架)

简单实现一个本地ChatGPT 服务&#xff0c;用到langchain框架&#xff0c;fastapi,并且本地安装了ollama。 依赖安装&#xff1a; pip install langchain pip install langchain_community pip install langchain-cli # langchain v0.2 2024年5月最新版本 pip install bs4 pi…

ChatGPT摆脱“AI味”:全面提升写作质感

ChatGPT在各种写作、创作场景都发挥了很大的价值&#xff0c;即使中文语料库占比不到5%&#xff0c;也能生成流畅的中文文本。但随着使用的深入&#xff0c;大家也逐渐发现了机器生成的内容&#xff0c;往往带有一种僵硬、刻板的“AI味”&#xff0c;尤其在论文、自媒体写作中&…

Mysql中索引的分类、增删改查与存储引擎对应关系

场景 Mysql中存储引擎简介、修改、查询、选择&#xff1a; Mysql中存储引擎简介、修改、查询、选择-CSDN博客 上面介绍Mysql的存储引擎。 下面介绍索引的分类和使用。 注&#xff1a; 博客&#xff1a;霸道流氓气质-CSDN博客 实现 Mysql中索引的分类 1、普通索引和唯一…

算法力扣刷题记录 四十三【最大、最小深度问题】

前言 本文学习树的深度问题&#xff1a;二叉树&#xff08;N叉树&#xff09;最大深度、最小深度&#xff1b; 记录 三十九【层序遍历模版应用二】中解决过二叉树的最大深度和最小深度题目。思路是按层遍历&#xff1a; 最大深度&#xff0c;相当于层序遍历结束&#xff1b;…

ZBLOG程序怎么天收录?本人亲自试过请看以下教程(zblog怎么样)

您为管理员组&#xff0c;请查看下方隐藏内容&#xff01; 先去ZBLOG官网下载ZBLOG程序 直达地址https://www.zblogcn.com/ 安装到宝塔里 安装好了之后打开zblog的后台 点开应用中心搜索CMS自适应资讯主题免费 安装即可 安装了之后配置主题内容 有经验者可以去吧动态改成…

周鸿祎关于2024年AI看法

1、2024年初AI三件大事 谷歌推出Gemini新版本&#xff0c;支持超过100万个token窗口 英伟达推出ChatWithRTX &#xff0c;要把每个人的电脑都折腾成一个私有大模型 Sora,OpenAI新推出的一个文生视频的新模型。 2、2024年大模型发展十大趋势判断&#xff08;周鸿&#xf…

pnpm9.5.0(catalog协议)

catalog(目录协议) 目录是工作区功能&#xff0c;用于将依赖版本范围定义为可重用常量&#xff0c;目录中定义的常量可以在package.json中使用&#xff0c; 结合 pnpm-workspace.yaml使用 定义pnpm-workspace.yaml packages&#xff1a;定义多仓库 packages:- packages/*cata…

Spring 外部jar包Bean自动装配

Spring 外部jar包Bean自动装配 背景介绍 公共代码模块被作为jar包引入业务项目&#xff0c;前者定义的bean即使添加了Component注解由于不会被扫描到也就无法被Spring管理。此处通过Spring SPI机制来完成 使用 spring.factories 在外部 jar 包中创建 spring.factories 文件&a…

Flink异常:org/apache/hadoop/hive/ql/parse/SemanticException

在flink项目中跑 上面这段代码出现如下这个异常&#xff0c; java.lang.NoClassDefFoundError: org/apache/thrift/TException 加上下面这个依赖后不报错 <dependency> <groupId>org.apache.thrift</groupId> <artifactId>libthrift</artifactId…

【逆向基础】十、工具分享之DIE(Detect It Easy)

一、简介 DIE&#xff08;Detect It Easy&#xff09;是一款可以轻松检测PE文件的程序&#xff1b;其主要作用是查壳&#xff0c;并将pe文件的内容解析出来&#xff0c;包括PE文件中包含的导入函数、导出函数的名称及地址&#xff0c;入口函数地址等&#xff0c;是技术人员分析…

lua 脚本语言 : 基础到高级语法

❃博主首页 &#xff1a; 「码到三十五」 &#xff0c;同名公众号 :「码到三十五」&#xff0c;wx号 : 「liwu0213」 ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a…

JupyterNotebook中导出当前环境,并存储为requirements.txt

​使用Anaconda管理Python环境时&#xff0c;可以轻松地导出环境配置&#xff0c;以便在其他机器或环境中重新创建相同的环境。可以通过生成一个environment.yml文件实现的&#xff0c;该文件包含了环境中安装的所有包及其版本。但是&#xff0c;常常在一些课程中JupyterNotebo…

Python基础-循环语句

本篇针对有c语言或其他语言编程基础的&#xff0c;主要展示Python循环语句编程的一些不同语法。 先来看一个简单的while循环案例&#xff0c;求1~100累加的和 。 i1 s0 while i<100:sii1 print(s) while循环练习 生成1~100的随机数&#xff0c;循环猜测直到猜对&#xf…

微信小程序毕业设计-学习资料库系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

前端高频面试算法题之二分查找

这道二分查找是一道比较基础的题目&#xff0c;一些中小厂在面试无经验或低年限经验的同学的时候考察的概率比较大。 题目描述 LeetCode 二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums …