【React】React Hooks

useState

useState 向组件中添加状态变量

image.png
状态是只读的,不可以直接修改

image.png
对于对象类型的状态变量,应该传递一个新的对象来更改

image.png
需要对象展开,并重新赋值,进行增加或者修改。

如果需要删除,则使用 filter。

import { useState } from "react";function App() {const [arr, setArr] = useState([{ id: 1, name: 'zhangsan' },{ id: 2, name: 'lisi' },{ id: 3, name: 'wangwu' }]);const content = arr.map((item, index) => {return <li key={item.id}>{item.name}</li>})const deleteVar = () => {setArr(arr.filter(item => item.name !== 'zhangsan'))}return (<><ul>{content}</ul><button onClick={deleteVar}>点击删除zhangsan</button></>)
}export default App

useReducer

让 React 管理多个相对关联的状态数据

import { useReducer } from "react"
// 1. 定义reducer函数,根据不同的action返回不同的状态
function reducer(state, action) {switch (action.type) {case 'ADD':return state + action.payloadcase 'SUB':return state - 1default:return state}
}function App() {// 2. 组件中调用 useReducer, 0 是初始化参数const [state, dispatch] = useReducer(reducer, 0)return (<div className="App">{state}{/* 3. 调用dispatch 产生一个新的状态,匹配事件(可传参) 更新 UI */}<button onClick={() => { dispatch({ type: 'ADD', payload:100 }) }}>+</button><button onClick={() => { dispatch({ type: 'SUB' }) }}>-</button></div>)
}export default App;

useRef

  • 进行数据存储 值可以手动修改 不是响应式数据
  • 获取 dom 节点

数据存储

import {useRef, useState} from "react";function App() {const [count, setCount] = useState(0)// useState 进行数据存储 值可以手动修改 不是响应式数据const preCount = useRef()function handleClick() {preCount.current = countsetCount(count + 1)}return (<><p>最新的 count:{count}</p><p>上次的 count:{preCount.current}</p><button onClick={handleClick}>增加count</button></>)
}export default App;

获取 dom 节点

import {useRef, useState} from "react";function App() {const inputRef = useRef(null);function handleClick() {inputRef.current.focus();}return (<><input ref={inputRef} /><button onClick={handleClick}>聚焦输入框</button></>);
}export default App;

获取组件

import {forwardRef, useImperativeHandle, useRef} from "react";// 默认子组件不对外开放自身的功能 需要 forwardRef 进行包裹
const Child = forwardRef(function (props, ref) {// 暴露给父组件的方法useImperativeHandle(ref, () => ({myFn: () => {console.log('子组件myFn方法')}}))return (<div>Child 子组件</div>)
})function App() {const childRef = useRef();function handleClick() {childRef.current.myFn();}return (<><Child ref={childRef}/><button onClick={handleClick}>按钮</button></>);
}export default App;

useContext

多层级通信 - useContext

官方文档:useContext

import {createContext, useContext, useState} from "react";function Section({children}) {const level = useContext(LevelContent)return (<section className="section">{/*逐渐从上层提供的LevelContext中取值*/}<LevelContent.Provider value={level + 1}>{/*children 也就是 heading 需要使用 useContext*/}{children}</LevelContent.Provider></section>);
}function Heading({children}) {const level = useContext(LevelContent)switch (level) {case 1:return <h1>{children}</h1>;case 2:return <h2>{children}</h2>;case 3:return <h3>{children}</h3>;case 4:return <h4>{children}</h4>;case 5:return <h5>{children}</h5>;case 6:return <h6>{children}</h6>;default:throw Error('未知的 level:' + level);}
}const LevelContent = createContext(0)function App() {return (<Section><Heading>主标题</Heading><Section><Heading>副标题</Heading><Heading>副标题</Heading><Heading>副标题</Heading><Section><Heading>子标题</Heading><Heading>子标题</Heading><Heading>子标题</Heading><Section><Heading>子子标题</Heading><Heading>子子标题</Heading><Heading>子子标题</Heading></Section></Section></Section></Section>)
}export default App;

在这里插入图片描述

useEffect

useEffect 在组件中创建由渲染本身引起的操作(如发送 Ajax 请求,更改 DOM 等),即非用户操作。

副作用函数随着依赖项的触发而执行。

image.png
清理副作用一般在组件卸载时执行

useEffect(() =>{// 实现副作用逻辑return ()=> {// 清除副作用逻辑}
}, [] )
import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";function App() {const [count, setCount] = useState(0)const handleIncrement = ()=>setCount(count + 1)const handleDecrement = ()=>setCount(count - 1)useEffect(() => {console.log('useEffect')}, [count]);return (<><div style={{ padding: 10}}><button onClick={handleIncrement}>+</button><span> {count} </span><button onClick={handleDecrement}>-</button></div></>);
}export default App;

useMemo

组件重新渲染时缓存计算的结果。

实例:count1计算斐波那契数列,count2和count1可以触发数值变化。使用memo可以使只有在count1变化时触发斐波那契数列计算函数,而count2变化时不触发斐波那契数列计算函数。


import { useMemo } from "react";
import { useState } from "react";function fib(n) {console.log('计算函数执行')if (n < 3) {return 1}return fib(n - 1) + fib(n - 2)
}function App() {const [count1, setCount1] = useState(0)const [count2, setCount2] = useState(0)console.log('组件重新渲染')const result = useMemo(() => {return fib(count1)}, [count1])return (<div className="App"><button onClick={() => { setCount1(count1 + 1) }}>change count1: {count1}</button><button onClick={() => { setCount2(count2 + 1) }}>change count2: {count2}</button>result: {result}</div>)
}export default App

image.png

image.png

useCallback

useCallback 缓存函数

import { memo, useCallback, useState} from "react";// memo 将组件变更为记忆组件
// 如果向组件传入的 prop 没有发生变化 将不会收到外部父组件的影响
const Button = memo(function ({onClick}) {console.log('Button渲染了')return <button onClick={onClick}>点击触发子组件</button>
})function App(callback, deps) {const [count, setCount] = useState(0)// 此时不仅需要 memo 还需要将函数设为useCallback 缓存函数// 因为父组件重新渲染 那么handleClick 将被分配一块新的内存地址 和之前的不是同一个函数// eslint-disable-next-line react-hooks/exhaustive-depsconst handleClick = useCallback(() => {console.log('点击按钮')},[])const handleUpdate = () => {setCount(count + 1)}return (<><div><p>Count: {count}</p><button onClick={handleUpdate}>点击更新count</button><Button onClick={handleClick}></Button></div></>);
}export default App;

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

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

相关文章

【踩坑日记】Pop!OS中文输入法的坑

文章目录 前言一、编译安装最新的IBus-pinyin输入法1.卸载旧输入法2.安装编译依赖3.下载源码4.编译和安装libpinyin5.编译和安装ibus-libpinyin6.重启IBus服务二、安装Fcitx5前言 使用Linux时,特别是涉及到中文的时候,会遇到一些问题。我最近在使用Pop!OS 22.04,这是Ubuntu…

Qt for MCUs 2.7正式发布

本文翻译自&#xff1a;Qt for MCUs 2.7 released 原文作者&#xff1a;Qt Group高级产品经理Yoann Lopes 翻译&#xff1a;Macsen Wang Qt for MCUs的新版本已发布&#xff0c;为Qt Quick Ultralite引擎带来了新功能&#xff0c;增加了更多MCU平台的支持&#xff0c;并且我们…

Apache SeaTunnel 社区 3 月月报

各位热爱 SeaTunnel 的小伙伴们&#xff0c;SeaTunnel 社区 3 月月报来啦&#xff01;这里将记录 SeaTunnel 社区每个月的重要更新&#xff0c;并评选出月度之星&#xff0c;欢迎关注。 SeaTunnel 月度 Merge Stars 感谢以下小伙伴 3 月为 Apache SeaTunnel 做的精彩贡献&…

[Java、Android面试]_17_Fragment和Service生命周期

本人今年参加了很多面试&#xff0c;也有幸拿到了一些大厂的offer&#xff0c;整理了众多面试资料&#xff0c;后续还会分享众多面试资料。 整理成了面试系列&#xff0c;由于时间有限&#xff0c;每天整理一点&#xff0c;后续会陆续分享出来&#xff0c;感兴趣的朋友可关注收…

将数组元素转化为指针的方法

1. 数组名作为指针 int arr[5] {0,1,2,3,4}; int*ptr arr; 2. 取地址 int* ptr &arr[3]; 3.指针算数运算 int* ptr arr; int* p *(arr1);

【个人使用分享】教你大厂云服务器如何选 联机不卡顿 幻兽帕鲁小白一键部署 16G低至26 续费1.5折

更新日期&#xff1a;4月11日&#xff08;半年档 价格回调&#xff0c;京东云采购季持续进行&#xff09; 本文纯原创&#xff0c;侵权必究 《最新对比表》已更新在文章头部—腾讯云文档&#xff0c;文章具有时效性&#xff0c;请以腾讯文档为准&#xff01; 【腾讯文档实时更…

计算机网络——WEB服务器编程实验

实验目的 1. 处理一个 http 请求 2. 接收并解析 http 请求 3. 从服务器文件系统中获得被请求的文件 4. 创建一个包括被请求的文件的 http 响应信息 5. 直接发送该信息到客户端 具体内容 一、C 程序来实现 web 服务器功能。 二、用 HTML 语言编写两个 HTML文件&#xff0c;并…

Java 中装饰模式,请用代码具体举例

装饰器模式允许你通过将对象放入包含行为的特殊包装对象中来为原对象动态添加新的行为。以下是一个简单的 Java 示例&#xff1a; // 定义接口 interface Component {void operation(); }// 具体组件实现接口 class ConcreteComponent implements Component {public void opera…

面向对象设计原则实验“依赖倒置原则”

高层模块不应该依赖于低层模块。二者都应该依赖于抽象。抽象不应该依赖于细节。细节应该依赖于抽象。 &#xff08;开闭原则、里氏代换原则和依赖倒转原则的三个实例很相似&#xff0c;原因是它之间的关系很紧密&#xff0c;在实现很多重构时通常需要同时使用这三个原则。开闭…

python 会员信息管理系统2.0

问题介绍 综合案例实现&#xff1a;会员管理系统设计与实现-V3 利用所学习的知识点 ,结合会员管理系统的分析与实现&#xff0c; 了解面向对象开发过程中类内部功能的分析方法&#xff0c;系统讲解 Python语法、控制结构、四种典型序列 ,函数定义以及面向对象语法和模块的应用…

【RealSense】Ubuntu20.04 安装 Intel RealSense ROS 并使用 D435i 测试

【RealSense】Ubuntu20.04 安装 Intel RealSense ROS 并使用 D435i 测试 1 本机环境2 安装流程3 存在的 bug3.1 Resource not found: rgbd_launch 1 本机环境 Ubuntu20.04ROS Noetic 2 安装流程 参考文档: Link 安装 Intel RealSense™ SDK 2.0&#xff0c;参考上一篇文章: L…

Go语言map、slice、channel底层实现(go面试)

slice 切片是一个引用类型&#xff0c;其底层实现是一个结构体&#xff0c;包含以下字段&#xff1a; ptr&#xff1a;一个指向底层数组的指针&#xff0c;指针指向数组的第一个元素。 len&#xff1a;切片当前包含的元素数量。 cap&#xff1a;切片的容量&#xff0c;即底层…

『研学倒计时』日本《极致产品力》顾问式研学再出发!

信心行动》共建中国食品行业风向标 2024年,信心比黄金还重要! 深度学习日本就是最佳路线。过去五年,许多中国企业开始研究与借鉴日本,元气森林、东方树叶、奈雪的茶、RIO鸡尾酒、蒟蒻果冻、丸美美妆、花印、名创优品.….从日本“失去的20年”中吸收逆势增长经验。 一、研学背…

快速列表quicklist

目录 为什么使用快速列表quicklist 对比双向链表 对比压缩列表ziplist quicklist结构 节点结构quicklistNode quicklist 管理ziplist信息的结构quicklistEntry 迭代器结构quicklistIter quicklist的API 1.创建快速列表 2.创建快速列表节点 3.头插quicklistPushHead …

【Python】控制台进度条

在Python开发中&#xff0c;有时需要向用户展示一个任务的进度&#xff0c;以提供更好的交互体验。下面我将展示如何使用Python来创建一个简单的控制台进度条。 效果&#xff1a; 代码&#xff1a; import time import sys def print_progress_bar(completed, total, length…

STM32 定时器外部时钟与循迹模块

1、上篇文章介绍了定时器使用内部时钟信号计数&#xff0c;实现计数、更新中断等功能。 2、可不可以利用定时器对来自外部的信号进行计数&#xff1f;也就是对输入io的信号计数&#xff1f; 3、可以 1、定时器外部时钟 STM32的通用定时器和高级定时器都将外部信号引入…

【Algorithms 4】算法(第4版)学习笔记 24 - 5.5 数据压缩

文章目录 前言参考目录学习笔记1&#xff1a;介绍2&#xff1a;游程编码 run-length encoding2.1&#xff1a;介绍2.2&#xff1a;Java 实现3&#xff1a;霍夫曼压缩 Huffman compression3.1&#xff1a;变长前缀码 variable-length codes3.1.1&#xff1a;介绍3.1.2&#xff1…

Nginx 基础应用实战 01 课程大纲与安装部署

Nginx 基础应用实战 01 目录 Nginx基础 版本区别与安装基础知识 Nginx安装部署http协议基础域名与dns 核心功能与应用场景 网站静态资源访问虚拟主机反向代理服务负载均衡rewrite软防火墙Tengine的扩展模块 实战&#xff1a;构建一个可供大家访问的静态网站 高级使用 核心配置…

【IC前端虚拟项目】验证环境方案思路和文档组织

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 对于mvu的验证环境,从功能角度就可以分析出需要搭建哪些部分,再看一下mvu的周围环境哈: 很明显验证环境必然要包括几个部分: 1.模拟idu发送指令; 2.模拟ram/ddr读写数据; 3.rm模拟mvu的行为; …

无缝集成:使用Spring Boot和Vue实现头像上传与回显功能

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…