React尚硅谷115-126(setState、Hooks、Fragment、context、组件优化、renderprops

122,context


只能用value传,可以传对象,字符串

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

使用:

  1. 创建Context容器对象:

const XxxContext = React.createContext()

  1. 渲染子组时,外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据:

<xxxContext.Provider value={数据}>

子组件

</xxxContext.Provider>

  1. 后代组件读取数据:

//第一种方式:仅适用于类组件

static contextType = xxxContext // 声明接收context

this.context // 读取context中的value数据

//第二种方式: 函数组件与类组件都可以

<xxxContext.Consumer>

{

value => ( // value就是context中的value数据

要显示的内容

)

}

</xxxContext.Consumer>

123.PureComponent和优化


办法1:

重写shouldComponentUpdate()方法

比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false

办法2:

使用PureComponent

import React,{PureComponent} from ‘react’

PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true

注意:

只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false

不要直接修改state数据, 而是要产生新数据

项目中一般使用PureComponent来优化

124.renderProps


如何向组件内部动态传入带内容的结构(标签)?

Vue中:

使用slot技术, 也就是通过组件标签体传入结构

React中:

使用children props: 通过组件标签体传入结构

使用render props: 通过组件标签属性传入结构,而且可以携带数据,一般用render函数属性

children props

xxxx

{this.props.children}

问题: 如果B组件需要A组件内的数据, ==> 做不到

render props

<A render={(data) => }>

A组件: {this.props.render(内部state数据)}

C组件: 读取A组件传入的数据显示 {this.props.data}

126.组件间的关系:

  • 父子组件

  • 兄弟组件(非嵌套组件)

  • 祖孙组件(跨级组件)

几种通信方式:

1.props:

(1).children props

(2).render props

2.消息订阅-发布:

pubs-sub、event等等

3.集中式管理:

redux、dva等等

4.conText:

生产者-消费者模式

比较好的搭配方式:

父子组件:props

兄弟组件:消息订阅-发布、集中式管理

祖孙组件(跨级组件):消息订阅-发布、集中式管理、conText(开发用的少,封装插件用的多)

125.错误边界


理解:

错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面

特点:

只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

使用方式:

getDerivedStateFromError配合componentDidCatch

// 生命周期函数,一旦后台组件报错,就会触发

static getDerivedStateFromError(error) {

console.log(error);

// 在render之前触发

// 返回新的state

return {

hasError: true,

};

}

componentDidCatch(error, info) {

// 统计页面的错误。发送请求发送到后台去

console.log(error, info);

}

126,总结通信方式


  • 父子组件

  • 兄弟组件(非嵌套组件)

  • 祖孙组件(跨级组件)

1.props:

(1).children props

(2).render props

2.消息订阅-发布:

pubs-sub、event等等

3.集中式管理:

redux、dva等等

4.conText:

生产者-消费者模式

最后前端到底应该怎么学才好?

如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。

不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot的Web开发支持【超详细【一篇搞定】果断收藏系列】

Override public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception { System.out.println(“MyInterceptor.afterCompletion”); } } 使用Java的形式配置拦截器的拦截路径 在WebMvcConfig…

零门槛用AI,302.AI让人工智能变得简单易用

当下人工智能火爆&#xff0c;提到AI&#xff0c;几乎每个人都能说上几句&#xff0c;但是你真的会使用AI吗&#xff1f; 当涉及到如何实际使用AI时&#xff0c;许多人可能会觉得它太过高深莫测&#xff0c;从而产生一种距离感&#xff0c;不知如何开始。我和大家也一样&#x…

Apple - Game Center Programming Guide

本文翻译整理自&#xff1a;Game Center Programming Guide&#xff08; Updated: 2016-06-13 https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/GameKit_Guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40008304 文章…

jemeter基本使用

后端关验签&#xff0c;设置请求头编码和token 配置编码和token

【分布式事务】Seata AT实战

目录 Seata 介绍 Seata 术语 Seata AT 模式 介绍 实战&#xff08;nacos注册中心&#xff0c;db存储&#xff09; 部署 Seata 实现 RM 实现 TM 可能遇到的问题 1. Seata 部署成功&#xff0c;服务启动成功&#xff0c;全局事务不生效 2. 服务启动报错 can not get …

c++分隔字符串

可以使用getline函数。 有两个版本&#xff1a; 至于为什么可以使用getline函数返回值作为while的判断条件&#xff0c;cprimer中表述如下&#xff1a;

[MySql]两阶段提交

文章目录 什么是binlog使用binlog进行恢复的流程 什么是redolog缓冲池redologredolog结构 两阶段提交 什么是binlog binlog是二进制格式的文件&#xff0c;用于记录用户对数据库的修改&#xff0c;可以作用于主从复制过程中数据同步以及基于时间点的恢复&#xff08;PITR&…

Docker(六)-本地镜像发布到私有库

1.下载镜像Docker Registry 用于搭建私人版本Docker Hub docker pull registry2.运行私有库Registry 运行私有库Registry&#xff0c;相当于本地有个私有Docker hubdocker run -d -p hostPort:containerPort -v 【宿主机目录】:【容器目录】 --privilegedtrue 【私有库镜像】…

C++使用Poco库封装一个FTP客户端类

0x00 Poco库中 Poco::Net::FTPClientSession Poco库中FTP客户端类是 Poco::Net::FTPClientSession , 该类的接口比较简单。 上传文件接口&#xff1a; beginUpload() , endUpload() 下载文件接口&#xff1a; beginDownload() , endDownload() 0x01 FTPCli类说明 FTPCli类…

若依-前后端分离项目学习

第一天&#xff08;6.24&#xff09; 具体参考视频 b站 楠哥教你学Java 【【开源项目学习】若依前后端分离版&#xff0c;通俗易懂&#xff0c;快速上手】 https://www.bilibili.com/video/BV1HT4y1d7oA/?share_sourcecopy_web&vd_sourcecd9334b72b49da3614a4257…

“湖北建筑安全员C证考试合格证书不能打印?可能是你犯了这个错误!“

"湖北建筑安全员C证考试合格证书不能打印&#xff1f;可能是你犯了这个错误&#xff01;" 湖北建筑安全员C证考试合格证书不能打印咋回事 目前建筑安全员C证都是全国联网的&#xff0c;在湖北考的建筑安全员C证在外省也可以正常使用or调转。全国工程质量安全监管信息…

【扫雷游戏】C语言详解

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

从基础到高级:视频直播美颜SDK的开发教学

本篇文章&#xff0c;小编将从基础到高级&#xff0c;详细讲解视频直播美颜SDK的开发过程&#xff0c;帮助开发者更好地掌握这一技术。 一、基础知识 什么是视频直播美颜SDK&#xff1f; 视频直播美颜SDK包含了一系列用于视频处理的功能模块&#xff0c;特别是美颜效果的实现…

封装vuetify3中v-time-picker组件,并解决使用时分秒类型只能在修改秒之后v-model才会同步更新的问题

目前时间组件还属于实验室组件&#xff0c;要使用需要单独引入&#xff0c;具体使用方式查看官网 创建公共时间选择器组件 common-time-pickers.vue 子组件页面 <template><div><v-dialog v-model"props.timeItem.isShow" activator"parent&q…

对于GPT-5的些许期待

目录 1.概述 2.GPT-5技术突破预测 3.智能系统人类协作 3.1. 辅助决策 3.2. 增强创造力 3.3. 处理复杂任务 3.4.人机协同的未来图景 4.迎接AI技术变革策略 4.1.教育方面 4.2.职业发展方面 4.3.政策制定方面 4.4.人才与技能培养 1.概述 GPT-5作为下一代大语言模型&a…

ONLYOFFICE 8.1全新升级,智能办公体验再升级,引领未来工作新潮流!

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ONLYOFFICE 8.1 &#x1f4d2;1. ONLYOFFICE简介&#x1f4d9;2. ONLYOFFICE特点&#x1f4d5;3. ONLYOFFICE功能⛰️PDF 文件编辑器&#x1…

【Android】实现图片和视频混合轮播(无限循环、视频自动播放)

目录 前言一、实现效果二、具体实现1. 导入依赖2. 布局3. Banner基础配置4. Banner无限循环机制5. 轮播适配器6. 视频播放处理7. 完整源码 总结 前言 我们日常的需求基本上都是图片的轮播&#xff0c;而在一些特殊需求&#xff0c;例如用于展览的的数据大屏&#xff0c;又想展…

三维点云目标识别对抗攻击研究综述

源自&#xff1a;电子与信息学报 作者&#xff1a;刘伟权 郑世均 郭宇 王程 注&#xff1a;若出现无法显示完全的情况&#xff0c;可 V 搜索“人工智能技术与咨询”查看完整文章 摘 要 当前&#xff0c;人工智能系统在诸多领域都取得了巨大的成功&#xff0c;其中深度学…

云原生架构:未来应用程序设计和部署的革新

目录 前言1. 云原生架构的概述1.1 什么是云原生架构1.2 云原生架构的核心理念 2. 云原生架构的核心特征2.1 容器化应用2.2 微服务架构2.3 自动化管理 3. 云原生架构的优势3.1 弹性和可伸缩性3.2 高可用性和容错性3.3 快速交付和持续部署 4. 实施云原生架构的关键技术4.1 容器编…

对比A100和4090:两者的区别以及适用点

自2022年年末英伟达发布4090芯片以来&#xff0c;这款产品凭借着其优异的性能迅速在科技界占据了一席之地。现如今&#xff0c;不论是在游戏体验、内容创作能力方面还是模型精度提升方面&#xff0c;4090都是一个绕不过去的名字。而A100作为早些发布的产品&#xff0c;其优异的…