React+TS 从零开始教程(3):useState

源码链接:下载

在开始今天的内容之前呢,我们需要先看一个上一节遗留的问题,就是给属性设置默认值。

我们不难发现,这个defaultProps已经被废弃了,说明官方并不推荐这样做。其实,这个写法是之前类组件的时候常用的,但现在都是函数式组件了,就不推荐这样写了。

我们在编写参数的时候,完全可以直接设置默认值,即传参的时候就解构,并初始化。

const Hello : React.FC <IProps> = ({message = 'Hello world~'}) => {return <h2>{message}</h2>
}

当然了,如果你非要用defaultProps,也不是不可以。

好了,这一节我们来讲讲Hook。

首先呢,第一个问题,我们要弄清楚hook是什么?

hook是一个特殊的函数,React Hooks 是 React 16.8 版本中引入的一个新特性,它允许你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 的主要目的是在不增加组件复杂性的前提下,增强函数组件的功能。

如果你在编写这个函数组件的时候,想要设置一些组件的变量(状态),以前的做法,我们是必须把组件转化成一个class,然后用setState去做。

现在有了hook,就只需要引入一个useState即可。

小需求

来一个小需求,我要完成一个组件,用于提供一个开关变量,只有一个布尔类型的状态。

import React, { useState } from "react";const Switch = () => {//每一个变量都要单独做一个State//useState解构出两个变量,一个是变量名,一个是赋值这个变量的函数const [on,setOn] = useState(false)return (<><h2 onClick={ () => {setOn(!on)}}>{on?'关闭':'开启'}</h2></>)
}export default Switch;

效果就是点击一次就会自动切换:

State变量一定是写在函数内部的,接下来详细说明、

const [on,setOn] = useState(false)

1)useState(false): 设置第一个参数,也就是on的初始值为false

2)on: 解构出来的第一个参数,我们可以在render中直接使用

3)setOn: 解构出来的第二个参数,是一个函数,用来给on赋值

模态窗体

useState的应用很广泛,任何需要状态管理的组件,都会用到,下面我们再来一个模态窗体的例子。

import React, { useState } from 'react';  const ModalExample = () => {  const [isOpen, setIsOpen] = useState(false);  const handleOpenModal = () => {  setIsOpen(true);  };  const handleCloseModal = () => {  setIsOpen(false);  };  return (  <>  <button onClick={handleOpenModal}>打开模态框</button>  {isOpen && (  <div className="modal">  <h2>模态框内容</h2>  <button onClick={handleCloseModal}>关闭模态框</button>  </div>  )}  </>  );  
}export default ModalExample;

这个例子比较简单,大家看看就行。


筛选列表

import React, { useState } from 'react';  
import '../style/FilterableList.css'const FilterableList = () => {  const [filterText, setFilterText] = useState('');  const [items, setItems] = useState(['华为mate60', '小米14 proMax', '荣耀Magic6']);  const filteredItems = items.filter(item =>  item.toLowerCase().includes(filterText.toLowerCase())  );  const handleFilterChange = (event:any) => {  setFilterText(event.target.value);  };  return (  <div className="filterable-list-container">  <div className="filter-input">  <input  type="text"  value={filterText}  onChange={handleFilterChange}  placeholder="过滤列表..."  />  </div>  <ul className="filtered-list">  {filteredItems.map(item => (  <li key={item} className="list-item">  {item}  </li>  ))}  </ul>  </div>  );  
}export default FilterableList

css省略,详见源码。

页面效果:

在 React 中,useState Hook 使得函数组件具有状态管理能力。当状态(在这个例子中是 filterText)更新时,React 会重新渲染该组件及其子组件。在组件的渲染过程中,React 会 重新计算所有 依赖于该状态的表达式。

所以,当filterText发生改变,由于

  const filteredItems = items.filter(item =>  item.toLowerCase().includes(filterText.toLowerCase())  );  

filteredItems是依赖于filterText的,所以是这样的顺序。

1)filterText改变

2)开始触发DOM更新(还未更新)

3)重新计算所有依赖filterTextstate

4)DOM成功更新

这个小节,我们主要讲解了useState的用法。

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

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

相关文章

AI金融投资:批量下载巨潮资讯基金招募说明书

打开巨潮资讯的基金招募说明书页面&#xff1a; http://www.cninfo.com.cn/new/fulltextSearch/full?searchkey%E5%B0%81%E9%97%AD%E5%BC%8F%E5%9F%BA%E7%A1%80%E8%AE%BE%E6%96%BD%E8%AF%81%E5%88%B8%E6%8A%95%E8%B5%84%E5%9F%BA%E9%87%91%E6%8B%9B%E5%8B%9F%E8%AF%B4%E6%98%…

计算机网络 访问控制列表以及NAT

一、理论知识 1. 单臂路由 单臂路由是一种在路由器上配置多个子接口的方法&#xff0c;每个子接口代表不同的 VLAN&#xff0c;用于在一个物理接口上支持多 VLAN 通信。此方法使得不同 VLAN 之间可以通过路由器进行通信。 2. NAT (网络地址转换) NAT 是一种在私有网络和公共…

可变分区管理 分区分配算法

First Fit Algorithm Best Fit Algorithm FFA&#xff1a;按照起始地址从小到大&#xff08;本题为分区编号&#xff09;找到第一个能装下进程的起始地址填入第二个表 此时 原表中将起始地址进程大小 分区大小-进程大小 如此继续 BFA&#xff1a;按分区大小排序 从小到大 找到…

【ONLYOFFICE震撼8.1】ONLYOFFICE8.1版本桌面编辑器测评

随着远程工作的普及和数字化办公的发展&#xff0c;越来越多的人开始寻找一款具有强大功能和便捷使用的办公软件。在这个时候&#xff0c;ONLYOFFICE 8.1应运而生&#xff0c;成为了许多用户的新选择。ONLYOFFICE 8.1是一种办公套件软件&#xff0c;它提供了文档处理、电子表格…

面试-细聊synchronized

1.线程安全问题的主要诱因&#xff1a; 存在多条共享数据(临界资源) 存在多条线程共同操作这些共享数据 解决问题的根本方法&#xff1a; 同一时刻有且仅有一个线程在操作共享数据&#xff0c;其他线程必须等到该线程处理完数据后在对共享数据进行操作。 2.synchroized锁 分…

使用Python Selenium,动态网页不再是难题!

目录 1、直接执行JS代码 🌐 1.1 execute_script基础用法 1.2 带参数执行JS函数 1.3 获取执行结果 2、使用execute_async_script异步执行 🔄 2.1 适用场景分析 2.2 实现异步操作示例 2.3 错误处理与调试技巧 3、JS与页面元素交互 👤 3.1 修改DOM属性 3.2 触发事…

中国智能工厂自动化集成商100强:广东23家,江苏20家,上海浙江紧随其后

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 更多的海量【智能制造】相关资料&#xff0c;请到智能制造online知识星球自行下载。 在数字化、智能化的浪潮中&#xff0c;中国智能工厂自动化集…

内存马查杀工具使用

内存马查杀工具使用 环境搭建 找一台centos7 在上面搭建tomcat yum install -y tomcat tomcat-webapps tomcat-admin-webapps systemctl start tomcat安装arthas wget https://github.com/alibaba/arthas/releases/download/arthas-all-3.6.6/arthas-bin.zip unzip arthas-b…

收银系统源码-千呼新零售2.0【线上营销】

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货等连锁店使用。 详细介绍请查看&a…

JupyterLab使用指南(三):JupyterLab的Cell详细介绍

JupyterLab Cell 使用教程 JupyterLab 的 cell 是一种强大的工具&#xff0c;提供了编写、执行、展示和记录的全方位支持&#xff0c;使得复杂的计算任务变得简单直观。通过熟练掌握 cell 的各种操作和快捷键&#xff0c;用户可以显著提高工作效率&#xff0c;专注于解决实际问…

ChatGPT API教程在线对接OpenAI APIKey技术教程

一、OpenAI基本库介绍 您可以通过 HTTP 请求与 API 进行交互&#xff0c;这可以通过任何编程语言实现。我们提供官方的 Python 绑定、官方的 Node.js 库&#xff0c;以及由社区维护的库。 要安装官方的 Python 绑定&#xff0c;请运行以下命令&#xff1a; pip install open…

入门Rabbitmq

1、什么是消息队列 消息队列&#xff1a;应用之间传递消息的方式&#xff0c;允许应用程序异步发送和接收消息&#xff0c;不需要连接对方 消息&#xff1a;文本字符串&#xff0c;对象.... 队列&#xff1a;存储数据。先进先出 2、应用场景 ①库存系统挂掉之后 MQ会等待&…

依赖注入(Dependency Injection, DI)在 iOS 开发中的应用

在 iOS 开发中&#xff0c;我们经常会遇到类与类之间存在依赖关系的情况。例如&#xff0c;一个视图控制器可能需要一个服务对象来处理数据&#xff0c;这种情况下&#xff0c;视图控制器就依赖于这个服务对象。传统的做法是直接在视图控制器中创建服务对象&#xff0c;但这会导…

统计学二学习笔记

假设检验&#xff08;Test of Hypothesis&#xff09; ①Null hypothesis :H0 期望值 ②Althernative hypothesis:Ha 或者H1 拒绝了H0之后要接收的值 ③即使是真的&#xff0c;如果发生的机率很小&#xff0c;我也会拒绝掉你 ④在范围内就接收他的H0值&#xff1a;定义阿尔法…

PhotoShop批量生成存储jpg

1、说明 根据之前自动批量生成psd格式的文件。打印一般都是jpg格式的&#xff0c;那如果将这些psd的文件&#xff0c;生成jpg&#xff0c;本文采用ps的动作 2、生成动作 点击窗口-动作 录屏存储jpg动作 3、根据动作生成 选择相应动作之后选择需要处理的文件夹

洛谷 P10584 [蓝桥杯 2024 国 A] 数学题(整除分块+杜教筛)

题目 思路来源 登录 - Luogu Spilopelia 题解 参考了两篇洛谷题解&#xff0c;第一篇能得出这个式子&#xff0c;第二篇有比较严格的复杂度分析 结合去年蓝桥杯洛谷P9238&#xff0c;基本就能得出这题的正确做法 代码 #include<bits/stdc.h> #include<iostream&g…

NC--介绍-未加密加密后-流量抓包对比

免责声明:本节仅做技术交流与学习... 目录 介绍: 用法: 未加密--流量抓包 加密: 攻击端 靶机 抓包分析: 介绍: nc 是一个Linux环境下常用的工具命令&#xff0c;可以用来帮助开发者查询和解决网路问题&#xff0c;通常被认为是 NetCat 工具的缩写&#xff0c;在网络工具…

Java——泛型

前言&#xff1a; 泛型类&#xff0c;泛型方法&#xff0c;泛型接口&#xff0c;通配符&#xff0c;类型擦除 文章目录 一、 泛型1.1、泛型的基本概念1.2 泛型的使用 三、通配符&#xff08;Wildcard&#xff09;四、类型擦除&#xff08;Type Erasure&#xff09;五、泛型的局…

React Native性能优化红宝书

一、React Native介绍 React Native 是Facebook在React.js Conf2015 推出的开源框架&#xff0c;使用React和应用平台的原生功能来构建 Android 和 iOS 应用。通过 React Native&#xff0c;可以使用 JavaScript 来访问移动平台的 API&#xff0c;使用 React 组件来描述 UI 的…

ONLYOFFICE 文档 8.1 现已发布:功能全面的 PDF 编辑器、幻灯片版式等等

0、前言 在技术的快速发展和工作方式的持续演进下&#xff0c;现代办公软件正变得越来越强大和多样化。ONLYOFFICE&#xff0c;作为市场上备受瞩目的一体化办公解决方案&#xff0c;以其全面的文档编辑、表格处理和演示制作功能&#xff0c;满足了用户在不同办公场景下的需求。…