react重新渲染以及避免不必要的渲染

触发react重新渲染

类组件触发重新渲染

1、setState

2、context

3、props

4、forceUpdate

函数式组件重新渲染

1、useState

2、props

避免不必要的渲染

类组件避免不必要的渲染

1、React.PureComponent/shouldComponentUpdate

函数式组件避免不必要的渲染

1、React.memo

2、useMemo(缓存变量)

3、useCallback(缓存函数)

context在类组件和函数式组件中的使用

创建context对象

import { createContext } from 'react'
const contextObj = createContext()
const { Provider, Consumer } = context

注入数据

function APP() {.........return (<provide value={name: 'xiaoliu'}><div></div></Provide>)
}
类组件
class Son2 extends Component {static contextType = contextrender() {const { name } = this.contextreturn (<>我是Son,我拿到的数据是:{name}</>)}
}
函数式组件

1、通过Consume拿到数据

const Son1 = () => {return (<Consumer>{({ name }) => (<div>我是Son,我拿到的数据是:{name}</div>)}</Consumer>)
}

2、 通过useContext 方式

const Son3 = () => {const { name } = useContext(context)return (<div>我是Son1,我拿到的数据是:{name}</div>)
}

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

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

相关文章

【Java系列】深入解析 Lambda表达式

简化这个代码 这个就是Lambda表达式,可以简化匿名内部类的写法 package lambda;public class demo2 {public static void main(String[] args) {//第二个参数是一个接口,所以我们在调用方法的时候,需要传递这个接口的实现类对象--接口多态// 但是这个实现类,我只要用一次,所以我…

Oracle dblink

在oracle数据库中&#xff0c;有的时候需要跨库访问一些数据&#xff0c;比如我在A表想要访问B表的数据&#xff0c;此时就可以在A表建立B表的dblink实现。 那么&#xff0c;如何搭建dblink呢 CREATE PUBLIC DATABASE LINK db_link_name CONNECT TO B IDENTIFIED BY B USING …

OJ-0708

示例1 1 App1 1 09:00 10:00 09:30 App1示例2 2 App1 1 09:00 11:00 App2 2 09:10 09:30 09:20 App2示例3 2 App1 1 09:00 11:00 App2 2 09:10 09:30 09:50 NA示例4 4 App1 1 09:00 10:00 App2 2 10:10 11:00 App3 4 11:10 12:30 App4 5 10:30 11:30 11:20 App4示例5 4 Ap…

@Builder注解详解:巧妙避开常见的陷阱

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 Builder注解详解&#xff1a;巧妙避开常见的陷阱 前言1. Builder的基本使用使用示例示例类创建对…

极客时间:使用Autogen Builder和本地LLM(Microsoft Phi3模型)在Mac上创建本地AI代理

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

pointpillar 代码报错

错误&#xff1a; Traceback (most recent call last): File "/home/gaoithe/project/python/code/CenterPoint/./tools/dist_test.py", line 415, in <module> main() File "/home/gaoithe/project/python/code/CenterPoint/./tools/dist_test.p…

运维系列.Nginx:自定义错误页面

运维系列 Nginx&#xff1a;自定义错误页面 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/…

本地部署秘塔开源搜索引擎

秘塔AI搜索是由秘塔科技于2024年初推出的一款新型搜索引擎&#xff0c;被业界誉为“中国版的Perplexity”。秘塔科技成立于2018年4月&#xff0c;其核心团队包括CEO闵可锐、技术专家唐悦和首席运营官王益为等。秘塔AI搜索以其高效简洁的特点受到关注&#xff0c;其搜索结果直接…

LeetCode——第 405 场周赛

题目 找出加密后的字符串 给你一个字符串 s 和一个整数 k。请你使用以下算法加密字符串&#xff1a; 对于字符串 s 中的每个字符 c&#xff0c;用字符串中 c 后面的第 k 个字符替换 c&#xff08;以循环方式&#xff09;。 返回加密后的字符串。 示例 1&#xff1a; 输入&…

数据结构(其二)--线性表

1. 基本概念 线性表&#xff1a; &#xff08;1&#xff09;.其中的各个元素&#xff0c;数据类型相同。 &#xff08;2&#xff09;.元素之间&#xff0c;有次序。 &#xff08;3&#xff09;.都有表头元素和表尾元素。 &#xff08;4&#xff09;.除了表头表尾&#xff…

谷粒商城学习笔记-16-人人开源搭建后台管理系统

文章目录 一&#xff0c;克隆前/后端代码1&#xff0c;克隆前端工程renren-fast-value2&#xff0c;克隆后端工程renren-fast 二&#xff0c;集成后台管理系统的后端代码三&#xff0c;启动后台管理系统四&#xff0c;前端系统的安装和运行1&#xff0c;下载安装VSCode2&#x…

为什么KV Cache只需缓存K矩阵和V矩阵,无需缓存Q矩阵?

大家都知道大模型是通过语言序列预测下一个词的概率。假定{ x 1 x_1 x1​&#xff0c; x 2 x_2 x2​&#xff0c; x 3 x_3 x3​&#xff0c;…&#xff0c; x n − 1 x_{n-1} xn−1​}为已知序列&#xff0c;其中 x 1 x_1 x1​&#xff0c; x 2 x_2 x2​&#xff0c; x 3 x_3 x…

拓展中国剩余定理

题目链接 代码&#xff1a; /*扩展中国剩余定理的使用范围更广泛&#xff0c;不要求模数全部互质扩展中国剩余定理&#xff1a;两两合并同余方程&#xff0c;合并 n - 1 次之后&#xff0c;就能求解合并两个同余方程&#xff1a;x ≡ r1 (mod p1) --- x a*p1 r1x ≡ r2 (mo…

from transformers.modeling_utils import PreTrainedModel

from transformers.modeling_utils import PreTrainedModel 是用于导入 Hugging Face Transformers 库中的 PreTrainedModel 类。这个类是所有预训练模型的基类&#xff0c;提供了许多通用功能和方法&#xff0c;适用于不同类型的模型&#xff08;如BERT、GPT、Transformer-XL等…

STM32对数码管显示的控制

1、在项目开发过程中会遇到STM32控制的数码管显示应用&#xff0c;这里以四位共阴极数码管显示控制为例讲解&#xff1b;这里采用的控制芯片为STM32F103RCT6。 2、首先要确定数码管的段选的8个引脚连接的单片机的引脚是哪8个&#xff0c;然后确认位选的4个引脚连接的单片机的4…

ChatGPT:fetch/xhr是什么意思

ChatGPT&#xff1a;fetch/xhr是什么意思 fetch 和 XHR&#xff08;XMLHttpRequest&#xff09;是两种用于在客户端与服务器之间进行异步通信的方法。在网页开发中&#xff0c;它们用于从服务器获取数据或将数据发送到服务器&#xff0c;而不需要刷新整个页面。 fetch fetch …

平滑切换/过渡多个控制器的方法

控制系统理论 在控制系统领域&#xff0c;平滑切换多个控制器通常指的是在保持系统稳定性和性能的同时&#xff0c;实现控制器之间的无缝切换。 输出抖动抑制方法&#xff1a;通过设计包含积分作用的控制器实现跟踪控制&#xff0c;并通过设计补偿器来减小控制输入信号在切换…

京东技术团队撰写的整整986页《漫画学Python》到底有什么魅力?

这是一本Python入门书。无论您是想学习编程的小学生&#xff0c;还是想参加计算机竞赛的中学生&#xff0c;抑或是计算机相关专业的大学生&#xff0c;甚至是正在从事软件开发的职场人&#xff0c;本书都适合您阅读和学习。但您若想更深入地学习Python并进行深层次应用&#xf…

第一个vue——01

指定vue实例的挂载位置 <div id ‘app’> </div> 一、创建vue实例 1.为什么要 new vue() ,直接调用vue&#xff08;&#xff09;函数可以吗&#xff1f; No&#xff0c; 因为直接调用vue()函数&#xff0c;不创建实例的话&#xff0c;会出现以下错误&#xff1…