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

React Hooks 中的属性详解

React Hooks 是 React 16.8 版本中新增的特性,允许我们在不编写 class 的情况下使用 state 和其他的 React 特性。Hooks 是一种可以让你在函数组件中“钩入” React 特性的函数。以下是一些常用的 React Hooks,并附有详细的用法和代码示例。

1. useState

useState 是一个 Hook 函数,让我们在 React 函数组件中添加局部 state,而不必将它们修改为 class 组件。

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>);
}

在这里,useState 是一个函数,它接收初始 state 作为参数,返回一个数组,其中第一个元素是当前的 state,第二个元素是一个更新 state 的函数。

2. useEffect

useEffect Hook 可以让你在函数组件中执行副作用操作。数据获取、订阅或者手动修改 DOM 都属于副作用。

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

在这个示例中,我们在组件渲染后设置了 document 的 title。我们传递给 useEffect 的函数会在每次渲染后都执行。如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

3. useContext

useContext Hook使你可以订阅 React 的 Context 而不必明确的在组件树中间传递 props。

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');function ThemedButton() {const theme = useContext(ThemeContext);return <button theme={theme}>I am styled by theme context!</button>;
}

在这个示例中,我们使用 useContext Hook 订阅了 ThemeContext,并将其值赋给 theme 变量。当 ThemeContext 更新时,组件会重新渲染,并使用最新的 context 值。

4. useReducer

useReducer 是另一个可以在函数组件中保存 state 的 Hook,但它更适用于有复杂 state 逻辑的组件,它接受一个 reducer 函数和初始 state 作为参数,返回当前的 state 以及与其配套的 dispatch 方法。

import React, { useReducer } from 'react';const initialState = {count: 0};function reducer(state, action) {switch (action.type) {case 'increment':return {count: state.count + 1};case 'decrement':return {count: state.count - 1};default:throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<>Count: {state.count}<button onClick={() => dispatch({type: 'increment'})}>+1</button><button onClick={() => dispatch({type: 'decrement'})}>-1</button></>);
}

在这个示例中,我们使用 useReducer 来处理 state 的更新逻辑。我们传递给 useReducer 的 reducer 函数会在每次 dispatch 时被调用。

5. useCallback

useCallback 返回一个记忆化版本的回调函数,它仅在依赖项改变时才会更新。当你将回调传递给被优化的子组件时,它可以防止因为父组件渲染而无谓的渲染子组件。

import React, { useState, useCallback } from "react";function App() {const [count, setCount] = useState(0);const increment = useCallback(() => {setCount(count + 1);}, [count]);return (<div>Count: {count}<Button onClick={increment}>Increment</Button></div>);
}function Button({ onClick, children }) {console.log("Button re-rendered");return (<button onClick={onClick}>{children}</button>);
}

在这个示例中,我们通过 useCallback 创建了一个只有当 count 改变时才会更新的 increment 函数。这样,只有当 increment 函数改变时,Button 组件才会重新渲染。

6. useMemo

useMemo 返回一个记忆化的值。它仅在某个依赖项改变时才重新计算 memoized 值。这用于优化性能,避免在每次渲染时都进行高开销的计算。

import React, { useMemo } from "react";function MyComponent({ list }) {const processedData = useMemo(() => {return processData(list);}, [list]);return <OtherComponent data={processedData} />;
}

在这个示例中,我们只有当 list 改变时,才使用 processData 函数重新计算 processedData。这样可以避免在每次渲染 MyComponent 时都进行数据处理,从而优化性能。

总结起来,Hooks 提供了一种更直接的 API 来使用React 的各种特性,如:state,context,reducers 和生命周期。这使得你在没有写 class 的情况下可以直接在你的函数组件中使用这些特性。

总的来说,Hooks 是一种强大的工具,它使我们能够在函数组件中使用 React 的各种特性。同时,Hooks 还帮助我们更好地组织代码,使其更易于理解和维护,优化了应用程序的性能和响应速度。

以上就是 React Hooks 的一些重要属性的详细解析。

相关文章:

React Hooks 中的属性详解

React Hooks 是 React 16.8 版本中新增的特性&#xff0c;允许我们在不编写 class 的情况下使用 state 和其他的 React 特性。Hooks 是一种可以让你在函数组件中“钩入” React 特性的函数。以下是一些常用的 React Hooks&#xff0c;并附有详细的用法和代码示例。 1. useStat…...

工作遇到问题与解决办法(一)

一、构建父子工程 父 <groupId>com.ruoyi</groupId> <artifactId>ruoyi</artifactId> <version>3.8.5</version> <modules><module>ruoyi-admin</module><module>ruoyi-framework</module><module>…...

综合与新综合与新型交通发展趋势[75页PPT]

导读&#xff1a;原文《综合与新综合与新型交通发展趋势[75页PPT]》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 完整版领取方式 完整版领取方式&#xff1a; 如需…...

【树形DP+换根思想】2022牛客多校加赛 H

登录—专业IT笔试面试备考平台_牛客网 题意&#xff1a; 思路&#xff1a; 这个虽然是树形DP&#xff0c;却用了换根的思想.... 首先&#xff0c;后缀0的个数可以转化成min(cnt2,cnt5)&#xff0c;其中cnt2为2的因子个数&#xff0c;cnt5为5的因子个数 然后进行DP 设dp[u]…...

Gitlab CI/CD笔记-第二天-GitOps的流水线常用关键词(1)

一、常用关键词 在Gitlab项目的根目录需要创建一个 .gitlab-ci.yaml的文件。 这个文件就是定义的流水线。Call :"Pipeline as code" 二、这条流水线怎么写&#xff1f; 一、掌握常用的关键词即可。 1.关键词分类 1.全局关键词 Global Keywards 2.任务关键词…...

Spring Boot3.0(一):入门篇

什么是 Spring Boot Spring Boot 是由 Pivotal 团队提供的全新框架&#xff0c;其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。 用我的话来理解&#xff0c;就是 Spring…...

各种排序333

冒泡排序 n方 public static void BubbleSort(int[] arr) {int n = arr.Length;for (int i = 0; i < n - 1; i++){for (int j = 0; j < n - i - 1; j++){if (arr[j] > arr[j + 1]){int temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}} }选择排序 n方 publ…...

[C++] 类与对象(中)完整讲述运算符重载示例 -- 日期类(Date) -- const成员

目录 1、前言 2、全缺省的构造函数 3、打印接口 4、拷贝构造 5、赋值运算符重载&#xff08;operator&#xff09; 5.1赋值重载是默认成员函数&#xff0c;重载格式&#xff1a; 5.2 赋值重载不能为全局函数 5.3 编译器默认生成 6、析构函数 7、operator> 8、ope…...

wonderful-sql 作业

Sql 作业 作业1&#xff1a; 答&#xff1a; create table Employee (Id integer not null, Name varchar(32) , Salary integer, departmentId integer, primary key (Id) );create table Department( Id integer primary key, Name varchar(30) not null );insert into emp…...

Go学习第六天

Golang变量内置pair结构详细说明 变量包括&#xff08;type, value&#xff09;两部分type 包括 static type和concrete type. 简单来说 static type是你在编码是看见的类型(如int、string)&#xff0c;concrete type是runtime系统看见的类型类型断言能否成功&#xff0c;取决…...

opencv-34 图像平滑处理-2D 卷积 cv2.filter2D()

2D卷积是一种图像处理和计算机视觉中常用的操作&#xff0c;用于在图像上应用滤波器或卷积核&#xff0c;从而对图像进行特征提取、平滑处理或边缘检测等操作。 在2D卷积中&#xff0c;图像和卷积核都是二维的矩阵或数组。卷积操作将卷积核在图像上滑动&#xff0c;对每个局部区…...

Java 克隆技术详解,深拷贝与浅拷贝的区别及实现

什么是克隆&#xff0c;为什么在编程中使用克隆 克隆是指创建一个对象的副本&#xff0c;使得新创建的对象在内容上与原始对象相同。在编程中&#xff0c;克隆是常用的技术之一&#xff0c;它具有以下几个重要用途和优势&#xff1a; 复制对象&#xff1a;使用克隆可以创建一个…...

包装器function

std::function模板类是一个通用的可调用对象的包装器&#xff0c;用简单的、统一的方式处理可调用对象。 template<class _Fty> class function…… _Fty是可调用对象的类型&#xff0c;格式&#xff1a;返回类型(参数列表)。 包含头文件&#xff1a;#include <functi…...

Django Rest_Framework(三)

文章目录 1. 认证Authentication2. 权限Permissions使用提供的权限举例自定义权限 3. 限流Throttling基本使用可选限流类 4. 过滤Filtering5. 排序Ordering6. 分页Pagination可选分页器 7. 异常处理 ExceptionsREST framework定义的异常 8. 自动生成接口文档coreapi安装依赖设置…...

总结 IO、存储、硬盘、文件系统相关常识

目录 一、IO是什么&#xff1f; 二、存储 三、硬盘 四、文件系统 4.1 文件目录和组织方式 4.2 文化路径 4.3 文件类型 4.4 文件系统操作 一、IO是什么&#xff1f; IO是英文Input/Output的缩写&#xff0c;指输入/输出。在计算机科学中&#xff0c;IO通常指计算机与外部设备或…...

JavaScript、深入浅出Node.js前端技能汇总

JavaScript 前端技能汇总 Frontend Knowledge Structure 深入浅出Node.js 书籍pdf 《深入浅出Node.js》的相关代码 Javascript&jQuery教程 pdf html & css教程 pdf 高性能JavaScript_中英双语版 pdf 跳坑之js调用另一个js文件中函数 方法1; 在html文件中加入两…...

use gnustep objective-c

first app #import <Foundation/Foundation.h>int main(int argc, const char * argv[]) {NSAutoreleasePool *pool [NSAutoreleasePool new];NSLog("first start");[pool drain];return 0; }tech 专注于概念&#xff0c;而不是迷失在语言技术细节中编程语言…...

8.15锁的优化

1.锁升级(锁膨胀) 无锁 -> 偏向锁 -> 轻量级锁 -> 重量级锁 偏向锁:不是真的加锁,而是做了一个标记,如果有别的线程来竞争才会真的加锁,如果没有别的线程竞争就不会加锁. 轻量级锁:一个线程占领锁资源后,另一个线程通过自旋的方式反复确认锁是否被是否(这个过程比较…...

单片机复位电路分析

来分析一下这个电路&#xff1a; 首先这里面有电容&#xff0c;所以是一个动态电路。哈哈哈 假设左上角的电压源是5V的代号为VOLT。 可以知道电容capacitor C1左边的电压也是5V&#xff0c;电容中间隔着一个绝缘体&#xff0c;所以不导电&#xff0c; 这个时候电流无法通过…...

公文写作技巧:“三面镜子”写作提纲60例

写作技巧&#xff1a;“三面镜子”写作提纲60例 1. 用好“三面镜子” 推深做实警示教育 勤用“反光镜”以案为鉴。 善用“显微镜”以案明纪。 巧用“聚光镜”以案促改。 2. 年轻干部要用好“三面镜子” 用好“反光镜”&#xff0c;照亮基层中的“暗点” 用好“显微镜”&am…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...