前端学习--React(5)

一、useReducer

管理相对复杂的状态数据

定义一个reducer函数,根据action值的不同返回不同的状态

在组件中调用useReducer并传入reducer函数和状态的初始值

事件发生时,通过dispatch函数分派一个对象,即通知reducer具体返回哪个状态对应的操作

import { useReducer } from "react";function reducer(state, action){switch(action.type){case 'INC':return state + 1case 'DEC':return state - 1case 'SET':return action.payloaddefault:return state}
}
function App() {const [state, dispatch] = useReducer(reducer, 0)return (<div className="App"><button onClick={()=>dispatch({type:'DEC'})}>-1</button>{state}<button onClick={()=>dispatch({type:'INC'})}>+1</button>{/* 自定义参数 */}<button onClick={()=>dispatch({type:'SET', payload:100})}>set 100</button></div>);
}export default App;

 二、useMemo

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

应用场景:消耗比较大的计算

import { useMemo, useState } from "react"
function fib(num){console.log('计算函数执行了')if ( num < 3 )return 1return fib(num - 1) + fib(num - 2)}
function App() {const [count1, setCount1] = useState(0)const [count2, setCount2] = useState(0)// 如果执行下面注释的代码 即使只有count2变化 计算函数也会执行// const result = fib(count1)const result = useMemo(() => {return fib(count1)},[count1])console.log('组件重新渲染')return (<div className="App"><button onClick={()=> setCount1(count1 + 1)}>count1:{count1}</button><button onClick={()=> setCount2(count2 + 1)}>count2:{count2}</button>{result}</div>);
}export default App;

三、React.memo

react组件默认的渲染机制:只要父组件重新渲染子组件就会重新渲染

用法

const MemoComponent = memo(function SomeComponent(props){//    ...
})

只有props发生变化时,memo包裹的缓存组件才会重新渲染

import { useState, memo } from "react";
const MemoSon = memo(function Son(props){console.log('子组件渲染了')return <div>Son</div>
})
function App() {const [count, setCount] = useState(0)console.log('父组件渲染了')return (<div className="App"><button onClick={() => setCount(count+1)}>+1</button><MemoSon/></div>);
}export default App;

props的比较机制

使用memo缓存组件之后,react会对每一个prop使用Object.is比较新值和老值,返回true表示没有变化

1. 传递一个简单类型的prop prop变化时组件重新渲染

2. 传递一个引用类型的prop 比较的是新值和旧值的引用是否相等 当父组件的函数重新执行时 实际上形成的是新的数组引用

3. 保证引用稳定 -> useMemo 组件渲染的过程中缓存一个值

//情况1 传递简单数据
//点击按钮 子组件会发生变化
import { useState, memo } from "react";
const MemoSon = memo(function Son(props){console.log('子组件渲染了')return <div>Son{props.count}</div>
})
function App() {const [count, setCount] = useState(0)console.log('父组件渲染了')return (<div className="App"><button onClick={() => setCount(count+1)}>+1</button><MemoSon count={count}/></div>);
}export default App;
//情况2 传递引用数据
//点击按钮 子组件会发生变化
import { useState, memo } from "react";
const MemoSon = memo(function Son(props){console.log('子组件渲染了')return <div>Son{props.list}</div>
})
function App() {const [count, setCount] = useState(0)console.log('父组件渲染了')const list = [1,2,3]return (<div className="App"><button onClick={() => setCount(count+1)}>+1</button><MemoSon list={list}/></div>);
}export default App;
//情况3 使用useMemo进行缓存
//子组件不再重新渲染
import { useState, memo, useMemo } from "react";
const MemoSon = memo(function Son(props){console.log('子组件渲染了')return <div>Son{props.list}</div>
})
function App() {const [count, setCount] = useState(0)console.log('父组件渲染了')const list = useMemo(()=>{return [1,2,3]}, [])return (<div className="App"><button onClick={() => setCount(count+1)}>+1</button><MemoSon list={list}/></div>);
}export default App;

useCallback

4. 给子组件传递函数

React.memo检测的是props中数据的栈地址是否改变。而父组件重新构建的时候,会重新构建父组件中的所有函数(旧函数销毁,新函数创建,等于更新了函数地址),新的函数地址传入到子组件中被props检测到栈地址更新。也就引发了子组件的重新渲染。

在组件多次渲染的时候缓存函数

使用场景:在往子组件传入了一个函数并且子组件被React.momo缓存了的时候使用

//情况4 传入函数
//点击按钮子组件不会重新渲染 因为使用useCallback缓存
import { useState, memo, useMemo, useCallback } from "react";
const Input = memo(function Input({onChange}){console.log('子组件重新渲染')return <input type="text" onChange={(e) => onChange(e.target.value)} />
})
function App() {const [count, setCount] = useState(0)const changeHandler = useCallback((value)=> console.log(value), [])return (<div className="App"><Input onChange={changeHandler}/><button onClick={() => setCount(count+1)}>{count}</button></div>);
}export default App;

四、React.forwardRef

import { useRef,forwardRef } from "react";//如果用下面的函数 sonRef的值是null
// function Son(){
//   return <input type="text"/>
// }
const Son = forwardRef((props, ref)=> {return <input type="text" ref={ref}/>
})
function App() {const sonRef = useRef(null)const showRef = ()=>{console.log(sonRef)}return (<div className="App"><Son ref={sonRef}/><button onClick={showRef}>focus</button></div>);
}export default App;

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

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

相关文章

STM32 寄存器配置笔记——USART DMA发送

一、DMA介绍 直接存储器存取(DMA)用来提供在外设和存储器之间或者存储器和存储器之间的高速数据传 输。无须 CPU 干预&#xff0c;数据可以通过 DMA 快速地移动&#xff0c;这就节省了 CPU 的资源来做其他操作。当产品对于时序要求较严格时&#xff0c;外设使用DMA的方式能够减…

深入了解Java 8日期时间新玩法:DateTimeFormatter与ZoneOffset的使用

推荐语 在这篇文章中&#xff0c;我们将深入探讨Java中的DateTimeFormatter和ZoneOffset类的功能和使用方法。这些类是在Java 8中引入的新的日期时间API的一部分&#xff0c;它们为我们提供了更灵活、更易用的日期和时间处理能力。尽管这些类在Java 8中已经出现&#xff0c;但…

ELK(六)—Filebeat安装部署

目录 一、介绍1.1特点1.2使用原因1.3结构图1.4工作流程 二、安装部署2.1下载2.2启动2.3监控日志文件2.4自定义字段 三、连接Elasticsearch四、工作原理 一、介绍 Filebeat是一个轻量级的日志和文件数据收集器&#xff0c;属于Elastic Stack&#xff08;ELK Stack&#xff09;中…

近期Chrome浏览器 不知哪个版本升级后原先http强制跳转到https,导致服务端302强制跳转到http也没反应

关于Chrome更新http强制跳转到https解决方法 近期Chrome浏览器 不知哪个版本升级后原先http强制跳转到https&#xff0c;导致服务端302强制跳转到http也没反应一、F12检查加载的Response Headers中有没有Non-Authoritative-Reason二、找了资料后得到解决方案&#xff1a;三、找…

云原生数据库是什么?它的作用是啥?

目前来说&#xff0c;各厂商的云原生数据库在演进路线上分成了两个略有不同的路径来解决不同的问题。 一种是各大公有云厂商选择的&#xff0c;优先保证上云兼容性的路线&#xff0c;就是基于存算分离架构对传统数据库进行改造的路线&#xff1a;通过把大量的日志操作放到后台…

插入排序——直接插入排序和希尔排序(C语言实现)

文章目录 前言直接插入排序基本思想特性总结代码实现 希尔排序算法思想特性总结代码实现 前言 本博客插入排序动图和希尔排序视频参考大佬java技术爱好者&#xff0c;如有侵权&#xff0c;请联系删除。 直接插入排序 基本思想 直接插入排序是一种简单的插入排序法&#xff…

图空图床图片外链系统源码-支持自定义权限策略-图片大小格式

含视频搭建教程。 大致功能&#xff1a; 支持本地等多种第三方云储存 AWS S3、阿里云 OSS、腾讯云 COS、七牛云、又拍云、SFTP、FTP、WebDav、Minio多种数据库驱动支持&#xff0c;MySQL 5.7、PostgreSQL 9.6、SQLite 3.8.8、SQL Server 2017支持配置使用多种缓存驱动&#xff…

车联网软件定义汽车安全攻击示例

目录 导言 名词解释 TBox QNX介绍 ADB 威胁分析

Flameshot的安装、配置及使用

概要&#xff1a;本篇主要介绍在Ubuntu22.04环境下&#xff0c;截图软件Flameshot的安装、配置及使用。 一、安装 推荐命令行安装 sudo apt install flameshot 二、修改gdm3配置文件 这一步是为了解决截图时没有光标的问题&#xff0c;解决方法我是从这里学到的解决flam…

【hugging face】bitsandbytes中8 bit量化的理解

8 位量化使数十亿参数规模的模型能够适应更小的硬件&#xff0c;而不会降低性能。 8 位量化的工作原理如下&#xff1a; 1.从输入隐藏状态中按列提取较大值&#xff08;离群值&#xff09;。 2.对 FP16 中的离群值和 int8 中的非离群值执行矩阵乘法。 3.改变非异常值结果以将值…

unity中:搭建在线AR应用

使用Imagine WebAR - Image Tracker插件部署WebGL应用 在使用Imagine WebAR - Image Tracker插件进行WebGL应用开发时&#xff0c;有两个关键知识点需要掌握&#xff1a; 1. 部署到支持HTTPS的服务器 由于WebGL应用需要访问用户的摄像头&#xff0c;因此必须在支持HTTPS的服…

微前端 模块联邦技术

目录 介绍 基本使用 演示用法 初始化配置文件 remote 项目 host 项目 为什么讲这个呢&#xff0c;很多人觉得他不是微前端&#xff0c;也有人定义它也是微前端&#xff0c;看怎么理解了&#xff0c;我觉得他是一个去中心化技术&#xff0c;它可以让多个独立构建的应用…

【力扣100】9.和为k的子数组

添加链接描述 class Solution:def subarraySum(self, nums: List[int], k: int) -> int:# 思路是从第一个元素开始遍历&#xff0c;加到爆&#xff0c;就把指针向前移一位result0for i in range(len(nums)):# 如果爆了&#xff0c;就向后移一位if i!len(nums)-1:ji1sumnums…

高并发爬虫用Python语言适合吗?

不管你用什么语言没在进行高并发前&#xff0c;有几点是需要考虑清楚的&#xff0c;&#xff1b;例如&#xff1a;数据集大小&#xff0c;算法、是否有时间和性能方面的制约&#xff0c;是否存在共享状态&#xff0c;如何调试&#xff08;这里指的是日志、跟踪策略&#xff09;…

C#云LIS系统源码 B/S架构,SaaS模式,可扩展性强

基于B/S架构的云LIS检验系统源码&#xff0c;整个系统的运行基于WEB层面&#xff0c;只需要在对应的工作台安装一个浏览器软件有外网即可访问。全套系统采用云部署模式&#xff0c;部署一套可支持多家医院检验科共同使用。 采用.Net Core新的技术框架、DEV报表、前端js封装、分…

腾讯云CentOS8 jenkins war安装jenkins步骤文档

腾讯云CentOS8 jenkins war安装jenkins步骤文档 一、安装jdk 1.1 上传jdk-11.0.20_linux-x64_bin.tar.gz 1.2 解压jdk安装包文件 tar -zxvf jdk*.tar.gz 1.3 在/usr/local 目录下创建java目录 cd /usr/local mkdir java 1.4 切到java目录&#xff0c;把jdk解压文件改名为jd…

【抽象策略模式】实践

前言 刚果商城&#xff0c;用户登录 Or 注册 发送邮箱验证码场景&#xff0c;使用抽象策略模式实现 什么是抽象策略模式 抽象策略模式是一种行为型设计模式&#xff0c;它允许定义一系列算法&#xff0c;将每个算法封装起来&#xff0c;并使它们可以互相替换。这使得客户端代码…

Java_LinkedList链表详解

目录 前言 ArrayList的缺陷 链表 链表的概念及结构 链表的种类 1.单向或双向 2.带头或不带头 3.循环或不循环 LinkedList的使用 什么是LinkedList LinkedList的使用 LinkedList的构造 LinkedList的其他常用方法介绍 LinkedList的遍历 ArrayList和LinkedList的…

OpenCL学习笔记(四)手动编译开发库(ubuntu+gcc+rk3588)

前言 笔者本次使用的是RK3588的开发板&#xff0c;内部烧写的是ubuntu20.04&#xff0c;gcc版本是9 本文档简单记录下编译的过程&#xff0c;有需要的小伙伴可以参考下 一、安装所需软件 1.安装git&#xff0c;教程比较多&#xff0c;不再重复 2.安装cmake&#xff0c;教程…

UWB的matlab仿真源码

作品详细文章与下载链接 第一部分:TR-UWB信号的产生和调制 简介 该实践涉及使用 MATLAB 生成和调制 TR-UWB 信号。超宽带信号是一类在频谱中具有宽带而不是窄带的信号信号&#xff0c;具有时间宽度的脉冲产生它。在本次实践中,MATLAB 程序是开发用于生成基带 TR-UWB 信号,我们用…