当前位置: 首页 > news >正文

react 18 Hooks扩展函数式组件的状态管理

React函数式组件

特点

React函数式组件具有以下特点:

  1. 简洁:使用函数的方式定义组件,语法简单直观。
  2. 无状态:函数式组件没有内部状态(state),只依赖于传入的props。
  3. 可复用:函数式组件易于复用,可以在多个地方使用相同的组件函数。
  4. 易于测试:函数式组件是纯函数,只依赖于输入的props,因此易于编写测试用例。

React提供了Hooks作为函数式组件的扩展,它们使函数式组件能够拥有状态和其他特性,例如使用useState来管理组件的状态、使用useEffect来处理副作用等。(注:副作用的来源:配置文件、用户的输入、数据库等等,所有的外部交互都有可能产生副作用,副作用会给程序带来安全隐患和不确定性,要尽可能的控制副作用在可控制的范围内发生。)

以下是一个使用Hooks扩展函数式组件的示例

 useState, useEffect

import React, { useState, useEffect } from 'react';function Counter(props) {const [count, setCount] = useState(0); //第一个为变量名,第二个参数为修改的方法useEffect(() => {  //相当于监听document.title = `Count: ${count}`;}, [count]);      //指定要监听的变量,发生变化后会执行第一个参数(函数)//什么也不传的话,每一个useState变量变化都会执行//传入空数组[]的话,只会在页面挂载的时候执行return (<div><p>Count: {props.name}</p><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

在上面的示例中,我们使用useState来创建了一个名为count的状态变量,并使用setCount函数来更新状态。我们还使用了useEffect来在组件渲染后更新文档标题,并在count发生变化时进行更新。


通过 useContext 获取上下文的值(在父组件ParentComponent中,我们将需要共享的数据 name通过 MyContext.Provider 提供给子组件。)

import React, { createContext, useContext } from 'react';// 创建一个上下文
const MyContext = createContext();// 父组件
const ParentComponent = () => {const name = 'John';return (<MyContext.Provider value={name}><ChildComponent /></MyContext.Provider>);
};// 子组件
const ChildComponent = () => {// 使用 useContext 获取上下文的值const name = useContext(MyContext);return <h1>Hello, {name}!</h1>;
};// 渲染应用
const App = () => {return <ParentComponent />;
};export default App;

 

相关文章:

react 18 Hooks扩展函数式组件的状态管理

React函数式组件 特点 React函数式组件具有以下特点&#xff1a; 简洁&#xff1a;使用函数的方式定义组件&#xff0c;语法简单直观。无状态&#xff1a;函数式组件没有内部状态&#xff08;state&#xff09;&#xff0c;只依赖于传入的props。可复用&#xff1a;函数式组…...

智能优化算法应用:基于浣熊算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于浣熊算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于浣熊算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.浣熊算法4.实验参数设定5.算法结果6.参考文献7.MA…...

c++ qt QtWidgetsApplication 项目 使用外部ui

1 包含生成的UI头文件&#xff1a; 例如&#xff0c;如果你的Qt Designer的.ui文件名为test.ui&#xff0c;那么生成的头文件通常为ui_test.h。 #include "ui_test.h"2 实例化UI类&#xff1a;.h文件中实例化ui 在你的主要类的头文件中&#xff0c;你通常会声明一个U…...

使用React 18、Echarts和MUI实现温度计

关键词 React 18 Echarts和MUI 前言 在本文中&#xff0c;我们将结合使用React 18、Echarts和MUI&#xff08;Material-UI&#xff09;库&#xff0c;展示如何实现一个交互性的温度计。我们将使用Echarts绘制温度计的外观&#xff0c;并使用MUI创建一个漂亮的用户界面。 本文…...

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理

1、通用的业务编码规则的管理功能 在前面随笔我们介绍了一个通用的业务编码规则的管理功能&#xff0c;通过代码生成工具Database2Sharp一步步的生成相关的后端和Winform、WPF的界面&#xff0c;进行了整合&#xff0c;通过利用代码生成工具Database2sharp生成节省了常规功能的…...

Android 13 - Media框架(26)- OMXNodeInstance(三)

上一节我们了解了OMXNodeInstance中的端口定义&#xff0c;这一节我们一起来学习ACodec、OMXNode、OMX 组件使用的 buffer 到底是怎么分配出来的&#xff0c;以及如何关联起来的。&#xff08;我们只会去了解 graphic buffer的创建、input bytebuffer的创建、secure buffer的创…...

力扣题目学习笔记(OC + Swift)21. 合并两个有序链表

21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 链表解题经典三把斧&#xff1a; 哑巴节点栈快慢指针 此题比较容易想到的解法是迭代法&#xff0c;生成哑巴节点&#xff0c;然后迭代生成后续节点。…...

C# WPF上位机开发(windows pad上的应用)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 大部分同学可能都认为c# wpf只能用在pc端。其实这是一种误解。c# wpf固然暂时只能运行在windows平台上面&#xff0c;但是windows平台不仅仅是电脑…...

Word使用技巧【开题报告】

1、修改目录&#xff1a;选中目录&#xff0c;点击更新域。 2、更改或删除单个页面上的页眉或页脚 3、借助其他软件在Word导入参考文献 利用zetero导入文献&#xff1a;安装zetero 解决参考文献插入问题 在Word中插入文献操作步骤 英文文献出现“等”&#xff0c;如何解决 Zote…...

电子学会C/C++编程等级考试2022年06月(七级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:有多少种二叉树 输入n(1<n<13),求n个结点的二叉树有多少种形态 时间限制:1000 内存限制:65536输入 整数n输出 答案 样例输入 3样例输出 5 答案: //参考答案 #include<bits/stdc++.h> using namespace std; …...

git中的smart checkout和force checkout

切换分支时出现了这个问题&#xff1a; 这是因为shiyan01分支修改了代码,但是没有commit, 所以在切换到test分支的时候弹出这个窗口 一、smart checkout(智能签出) 会把shiyan01分支的改动内容带到test分支。合并处理后的内容就变成了test分支的内容,而shiyan01分支的改动会被…...

vue3整合Element-Plus,极速上手。

条件分页查询&#xff1a; 需求分析&#xff1a; form表单 Button按钮 Table表格 Pagination分页 页面布局&#xff1a; 搜索表单&#xff1a; 如果表单封装的数据较多&#xff0c;建议绑定到一个对象中。 …...

学习Vue2.x

文章目录 一、使用Vue脚手架1.ref和props属性2.mixin混入3.组件化编码流程4.webStorage5.组件自定义事件6.全局事件总线7.消息订阅与发布 二、使用步骤1.引入库 一、使用Vue脚手架 1.ref和props属性 ref属性&#xff1a; &#xff08;1&#xff09;被用来给元素或子组件注册应…...

新手如何快速熟悉代码,写出东西(持续更新)

目录 第一章、最小编程任务的设想1.1&#xff09;程序员入门会遇到的问题1.2&#xff09;最小编程任务的设想1.3&#xff09;编程逻辑1.4&#xff09;具体需求 第二章、最小编程单元的练习2.1&#xff09;代码/需求方面2.1.1&#xff09;初级练习2.1.2&#xff09;中级练习2.1.…...

11-网络安全框架及模型-软件安全能力成熟度模型(SSCMM)

目录 软件安全能力成熟度模型 1 背景概述 2 主要内容 3 成熟度等级定义 4 关键过程和实践 5 评估方法 6 改进建议 7 持续改进 8 主要价值 9 应用场景 10 优势和局限性 备注 软件安全能力成熟度模型 1 背景概述 SSCMM模型是软件安全能力成熟度模型&#xff0c;它描…...

Linux操作系统基础知识点

Linux是一种计算机操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦兹&#xff08;Linus Benedict Torvalds&#xff09;于1991年首次发布。Linux操作系统通常与GNU套件一起使用&#xff0c;因此也被称为GNU/Linux。它是一种类UNIX的操作系统&#xff0c;设计为多用户、多任务…...

python 通过opencv及face_recognition识别人脸

效果&#xff1a; 使用Python的cv2库和face_recognition库来进行人脸检测和比对的 0是代表一样 认为是同一人。 代码&#xff1a; pip install opencv-python pip install face_recognition# 导入cv2库&#xff0c;用于图像处理 import cv2 # 导入face_recognition库&#…...

Android开发中常见的Hook技术有哪些?

Hook技术介绍 Hook技术是一种在软件开发中常见的技术&#xff0c;它允许开发者在特定的事件发生时插入自定义的代码逻辑。常见的应用场景包括在函数调用前后执行特定的操作&#xff0c;或者在特定的事件发生时触发自定义的处理逻辑。 在Android开发中&#xff0c;Hook通常是通…...

【linux c多线程】线程的创建,线程信息的获取,获取线程返回值

线程创建 ​专栏内容&#xff1a; 参天引擎内核架构 本专栏一起来聊聊参天引擎内核架构&#xff0c;以及如何实现多机的数据库节点的多读多写&#xff0c;与传统主备&#xff0c;MPP的区别&#xff0c;技术难点的分析&#xff0c;数据元数据同步&#xff0c;多主节点的情况下对…...

MFC或QT中,自绘控件的目的和实现步骤

MFC自绘控件的步骤 自绘控件的目的是为了能够自定义控件的外观、行为和交互方式&#xff0c;以满足特定的需求&#xff0c;同时增强应用程序的用户体验。 实现步骤如下&#xff1a; 1、创建一个继承自MFC控件基类&#xff08;如CButton、CStatic等&#xff09;的自定义控件类…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...