React Hooks学习笔记

一、usestate的使用方法-初始化state函数

import React, { useState } from "react";
function App() {const [count, setCount] = useState(0);return (<div><p>点击{count}次</p><button onClick={() => setCount(count + 1)}>点击</button></div>)

运行效果图:

二、useEffect的使用方法-执行钩子函数的操作

import React, { useState, useEffect } from "react";
const [count,setCount] = useState(0);const btnClick = () =>{setCount(count + 1);}useEffect(() =>{console.log("执行了useEffect");document.title = '点击了{count}次'})return(<div><p>点击{count}次</p><button onClick = {() => { btnClick()}}>点击</button></div>)

运行效果图:

三、useContext的使用方法-实现组件之间的共享

import React, { useContext, createContext } from "react"; 
const myContext = createContext();function App(){const value = useContext(myContext);return(<div>{value}</div>);}export default function MyComponent(){return(<myContext.Provider value={100}><div>hello world</div><App/></myContext.Provider>);}

运行效果图:

四、useReducer的使用方法-把组件的所有状态更新逻辑整合到reducer这个函数中

import React, { useReducer } from "react";
function Counter(){const initState = {count: 0 };function reducer(state, action){switch(action.type){case 'increment':return { count: state.count + 1};case 'decrement':return {count: state.count - 1};default:return{ count: state};}}const [state,dispatch] = useReducer(reducer, initState);return(<div><button onClick={() => dispatch({ type:'decrement'})}>减</button><span>{state.count}</span><button onClick={() => dispatch({ type:'increment'})}>加</button></div>)}export default Counter;

运行效果图:

五、useMemo的使用方法-对数据的记忆,具有缓存功能,类似于Vue的计算属性

useMemo 接收2个参数,第1个参数为执行运算的函数,第2个参数为要监控的状态。

import React, {  useMemo } from "react";
function Counter(){const [count, setCount] = useState(0);const value = useMemo(function(){return count * 2;},[count]);//数组中的元素就是useMemo监控的状态return (<div><h3>{count}</h3><h3>{value}</h3><button onClick={() => setCount(count + 1)}>按钮</button></div>)}export default Counter;

运行效果图:

六、useRef的使用方法-获取组件中的 dom 对象

import React, { useRef  } from "react"; 
function App(){const refObj = useRef();console.log(refObj);function getRef(){console.log(refObj);     }return(<div><div ref={refObj}>hello</div><button onClick={getRef}>按钮</button></div>);}
export default App;

运行效果图:

七、useCallback的使用方法-允许多次渲染中缓存数据,返回一个memoized回调函数,对函数的记忆

有2个函数,第一个参数是要缓存的函数,第二个参数是一个数组 (响应值变化时更新函数)

import React, { useCallback, memo   } from "react";function App(){const[count, setCount] = useState(1);const fn = useCallback(function (){return count;},[count]);return(<div>{count}<button onClick={() => setCount(count + 1)}>增加</button><Heads fn={fn}></Heads></div>);}const Heads = memo(function(props){return <button onClick={() =>console.log(`我被渲染了${props.fn()}次`)}>按钮</button>});
export default App;

运行效果图:

八、useImperativeHandle和forwardRef的使用方法

  1. useImperativeHandle-自定义由 ref 暴露出来的程序、数据或地址表等的入口地址,可应用于父组件访问子组件的场景。
  2. forwardRef-允许组件使用 ref 将一个 DOM 节点暴露给父组件
import React, {useRef,useImperativeHandle, forwardRef   } from "react"; 
function App(){const CounterRef = useRef();function click(){const { count, setCount } = CounterRef.current || {};setCount(count + 1);}return(<><Counter ref={CounterRef}></Counter><button onClick={click}>按钮</button></>);}const Counter = forwardRef((props,ref) =>{const [count, setCount] = useState(0);useImperativeHandle(ref,() => ({ count, setCount }), [count]);return<>{count}</>});export default App;

运行效果图:

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

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

相关文章

搭建discuz论坛(lvs+nginx+http+mysql+nfs)8台服务器

搭建discuz论坛&#xff08;lvsnginxhttpmysqlnfs&#xff09; 一、IP规划 服务名IP地址服务LVS1192.168.100.110keepalivedipvsadmLVS2192.168.100.111keepalivedipvsadmnginx1192.168.100.113nginxnginx2192.168.100.114nginxnfs192.168.100.116nfs-utilweb1192.168.100.11…

为何现在大屏的UI设计和前端开发项目已经多到咱们快忙不过来了?

**为何现在大屏的UI设计和前端开发项目已经多到咱们快忙不过来了&#xff1f;** **一、引言** 随着科技的进步和消费者需求的不断升级&#xff0c;大屏设备&#xff08;如智能电视、车载屏幕、拼接屏等&#xff09;在各行各业中的应用越来越广泛。这导致了大屏UI设计和前端开…

四步教你实现一个前端的动态实时时间(可自定义时间格式)

前言&#xff1a;我是在Vue中做的 1、将你的实时时间放在一个合适的位置 <div style"position: relative; padding-top: 0px; margin-top: -5px"><div style"position: absolute; left: auto; color: black; background-color: #7fd584; font-size: 3…

欧科云链研究院:坎昆升级后,Layer2变得更好了吗?

本文由欧科云链研究院OKG Research联合PANews出品&#xff1a;以数据为导向&#xff0c;洞察真实的链上世界。 作者&#xff5c;Jason Jiang, OKG Research 坎昆升级后&#xff0c;以太坊L2的交易费用降低明显且吞吐量有所提升&#xff0c;但整体生态并没有迎来想象中的繁荣景…

教你怎么不开DLSS3.0也能有效提高永劫无间帧数

永劫无间&#xff0c;一款国风的多人对战竞技游戏&#xff0c;游戏画面特别精美&#xff0c;在游戏中给玩家强烈的打击感&#xff0c;玩家在游玩过程中仿佛置身于游戏&#xff0c;而且此游戏非常受玩家欢迎。游戏中可以进行三人、双人、单人进行游玩&#xff0c;我们需要选择出…

Numpy常用的30个经典操作以及代码演示

目录 以下是具体的操作步骤和示例代码&#xff1a; 数组创建 数组操作 数组计算 统计分析 矩阵操作 这些操作涵盖了数组创建、数组操作、数组计算、统计分析和矩阵操作等多个方面. 以下是具体的操作步骤和示例代码&#xff1a; 首先导入Numpy import numpy as np数组…

sublime中无法找到Package Control或Install Package

在Crtl Shift P 中无法查找到Package Control或Install Package或调用产生报错。 可以尝试在 首选项 ---- > 设置中 检查配置文件"ignored_packages":紧跟的中括号中是否为空&#xff0c;如果不为空请删除其中内容。 如果不确定内容&#xff0c;可以用下面的…

【Linux】日志

日志是记录软件运行过程中发生的事件的一种手段&#xff0c;通常包含以下内容&#xff1a; 时间戳&#xff1a;记录日志条目创建的确切时间。这对于追踪事件发生的时间顺序至关重要。日志级别&#xff1a;表示日志信息的严重性或重要性&#xff0c;常见的级别包括 DEBUG、INFO…

【Linux】Linux背景历史

Linux背景历史 Linux背景Linux是什么&#xff1f;计算机的发展unix发展史Linux发展史开源Linux官网以及版本更替Linux企业应用现状 Linux环境的安装 Linux背景 Linux是什么&#xff1f; Linux(Linux Is Not UniX)&#xff0c;一般指GNU/Linux&#xff0c;是一种免费使用和自由…

Qt QChart 曲线图表操作

学习目标&#xff1a;QChart 曲线图表操作 学习内容 QT中的QChart类提供了一个功能强大的图表绘制框架,可以根据需求方便高效地绘制各种类型的图表,主要特点如下: 支持多种常见图表类型,如线图、条形图、饼图、散点图等各种类型。开发者只需要选择合适的图表类和数据即可绘制…

一键调仓/组合买卖?篮子交易功能,PTrade如何进行篮子交易?

篮子交易&#xff0c;也叫组合交易&#xff0c;是指同时完成一个股票或期货组合的交易。 “篮子交易”功能&#xff0c;通过模板一键导入一篮子股票&#xff0c;可对篮子中的股票进行剔除 或使用持仓替代操作&#xff0c;同时可设定报价方式、单笔超价、交易方式等。并实时显示…

android13 rom 开发总纲说明

1. 这里是文章总纲&#xff0c;可以在这里快速找到需要的文章。 2. 文章一般是基于标准的android13&#xff0c;有一些文章可能会涉及到具体平台&#xff0c;例如全志&#xff0c;瑞芯微等一些平台。 3.系统应用 3.1系统应用Launcher3桌面相关&#xff1a; 3.2系统应用设置S…

深度学习--基础语法

目录 pytorch的tensor与numpy 关系 tensor与numpy的转换&#xff1a; 区别&#xff1a; 创建tensor 一 numpy数组&#xff0c;list列表转换为tensor 二 未初始化创建tensor 创建空的 PyTorch 张量 e&#xff1a; 使用 torch.Tensor() 创建指定大小的张量 f&#xff1a;…

HNU-2024操作系统实验-Lab9-Shell

一、 实验目的 理解Shell程序的原理、底层逻辑和Shell依赖的数据结构等 在操作系统内核MiniEuler上实现一个可用的Shell程序 能够根据相关原理编写一条可用的Shell指令 二、 实验过程 首先从底层出发&#xff0c;实现Shell程序 1.在src/include目录下新建prt_shell.h头文…

产线工控安全怎么做

随着工业自动化的推进&#xff0c;工控系统在现代生产线中的应用越来越广泛&#xff0c;但随着网络安全威胁的不断演变&#xff0c;产线工控系统的安全也面临着前所未有的挑战。面对这种情况&#xff0c;可以使用MCK主机加固&#xff08;深信达&#xff09;解决方案为产线工控安…

ROS基础学习-ROS运行管理

ROS运行管理 目录 1. ROS运行管理简述2. ROS元功能包2.1 概念2.2 作用2.3 实现 3. ROS-launch文件3.1. ROS节点管理launch文件3.1.1 概念3.1.2 作用3.1.3 使用 3.2 launch文件标签 1. ROS运行管理简述 ROS是多进程(节点)的分布式框架&#xff0c;一个完整的ROS系统实现&#x…

C++ 入门08:运算符重载

往期回顾&#xff1a; C 入门05&#xff1a;类和对象-CSDN博客 C 入门06&#xff1a;类的进阶&#xff08;构造函数的重载与拷贝构造函数&#xff09;-CSDN博客 C 入门07&#xff1a;静态成员和常量成员-CSDN博客 一、前言 在前面的文章学习中&#xff0c;我们学习了类和对象的…

在Spring Boot项目中集成分布式追踪系统

在Spring Boot项目中集成分布式追踪系统 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在复杂的分布式系统中&#xff0c;定位和解决问题是一项挑战。分布式追踪系统通过跟踪请求的调用链&#xf…

基于搭载 DJYOS 的 STM32H730 的低空无人驾驶无人机解决方案探究

摘要&#xff1a;本文详细阐述了一种基于搭载 DJYOS 的 STM32H730 开发的低空无人驾驶无人机解决方案。通过对其硬件配置、飞控系统、传感器应用、动力与续航以及操控方式等方面的深入分析&#xff0c;展现了该方案在低空无人驾驶领域的创新性和优势&#xff0c;为相关技术的发…

最新 Kubernetes 集群部署 + Contranerd容器运行时 + flannel 网络插件(保姆级教程,最新 K8S 1.28.2 版本)

资源列表 操作系统配置主机名IP所需插件CentOS 7.92C4Gk8s-master192.168.60.143flannel-cni-plugin、flannel、coredns、etcd、kube-apiserver、kube-controller-manager、kube-proxy、 kube-scheduler 、containerd、pause 、crictlCentOS 7.92C4Gk8s-node01192.168.60.144f…