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.mzph.cn/bicheng/34238.shtml

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

相关文章

菜单树的三种实现形式(递归,for, 队列)

菜单树在软件开发中经常用于展示层级结构的数据&#xff0c;例如网站导航菜单或文件系统。在实际开发中&#xff0c;我们常常需要考虑不同的数据结构和算法来实现这种层级关系的展示。本文将介绍菜单树的三种常见实现方式&#xff1a;递归、for循环和队列&#xff0c;帮助读者更…

小红书商家采集软件 商家电话批量采集软件

下面是一个关于小红书商家爬虫的程序的示例&#xff1a; import requests from bs4 import BeautifulSoupdef get_seller_data():url https://www.xiaohongshu.com/sellersheaders {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like…

基于YOLOv8的车辆跟踪与车速计算应用

实现基于YOLOv8的车辆跟踪与车速计算应用涉及以下几个步骤。这里我们假设你已经熟悉Python编程,并且已经安装了所需的库,如YOLOv8、OpenCV等。如果没有,可以先安装这些库: pip install ultralytics opencv-python numpy opencv-contrib-python步骤1:安装和配置YOLOv8 首…

记一下 Stream 流操作

Java Stream流 创建流 Collection.stream() / Collection.parallelStream()&#xff1a;从集合生成流&#xff0c;后者为并行流。 List<String> list new ArrayList<>(); Stream<String> stream list.stream(); //获取一个顺序流 Stream<String> …

single_cell_tutorial 教程

介绍 1、AnnData 不是一个单一的表格,而是一个包含多个表格和矩阵的复杂数据结构,用于处理和存储单细胞基因组数据。 AnnData对象包含以下主要部分: var:基因的元数据(Pandas DataFrame格式),包含每个基因的属性信息。例如每个基因的ID、名称、染色体位置等。可以将其…

软件工程-第4章结构化编码和测试

软件的实现阶段&#xff1a;软件编码&#xff0c;单元测试和综合测试。 软件编码是对软件设计的进一步具体化&#xff0c;其任务是将设计表示变换成用程序设计语言编写的程序。 软件测试是软件质量保证的重要手段&#xff0c;要成功开发出高质量的软件产品&#xff0c;必须认…

如何使用 NFTScan NFT API 在 Sei 网络上开发 Web3 应用

Sei Network 是一个专为交易而设计的 Layer 1 区块链。它建立在 Cosmos SDK 上&#xff0c;使用一种称为 Tendermint BFT 的新型共识机制。不仅专攻 DeFi 领域的加密资产交易&#xff0c;更在游戏、社交媒体和 NFTs 等热门 verticals 构建了多功能区块链生态系统。Sei Network …

Day15—热点搜索词统计

一、要求 根据用户上网的搜索记录对每天的热点搜索词进行统计&#xff0c;以了解用户所关心的热点话题。 要求完成&#xff1a;统计每天搜索数量前3名的搜索词&#xff08;同一天中同一用户多次搜索同一个搜索词视为1次&#xff09;。 二、数据 三、配置scala环境 1.下载sca…

网站制作和推广

在当今数字化时代&#xff0c;拥有一个网站对于企业的发展和推广来说是至关重要的。网站既可以作为一个企业的形象展示&#xff0c;也可以作为一个销售渠道&#xff0c;更可以作为一个品牌传播的平台。在本文中&#xff0c;我们将讨论网站制作和推广的重要性&#xff0c;以及一…

08较成功的降低干扰获得较好的波形

08较成功的降低干扰获得较好的波形 波形数据当前数据调整后的数据后续 结语其他以下是废话 试验&#xff0c;本身就是一个摸索的过程&#xff0c;在上一阶段的试验中&#xff0c;我们优化了采集装置&#xff0c;更换了导电性较好的电极。 目前数据美观程度较之前提升了不少&…

ViT:3 Compact Architecture

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则…

动手学深度学习(Pytorch版)代码实践 -卷积神经网络-27含并行连结的网络GoogLeNet

27含并行连结的网络GoogLeNet import torch from torch import nn from torch.nn import functional as F import liliPytorch as lp import matplotlib.pyplot as pltclass Inception(nn.Module):# c1--c4是每条路径的输出通道数def __init__(self, in_channels, c1, c2, c3, …

【kaggle数据集无法下载解决办法】

kaggle数据集无法下载的解决办法 当我们在做机器学习相关问题的时候&#xff0c;需要到kaggle网站上下载数据集&#xff0c;但是很多时候速度很慢或者连接超时等问题&#xff0c;此时解决办法如下&#xff1a; 在本地安装Kaggle API包 打开终端输入如下指令&#xff1a; pip i…

vscode使用内置插件断点调试vue2项目

1、首先项目中要开启source-map 在vue.config.js 文件中 module.exports {configureWebpack: {devtool: process.env.NODE_ENV ! "production" ? "source-map" : ,} }2、项目根目录新建.vscode/launch.js文件 {"configurations": [{"ty…

解析JavaScript中逻辑运算符和||的返回值机制

本文主要内容&#xff1a;了解逻辑运算符 &&&#xff08;逻辑与&#xff09;和 ||&#xff08;逻辑或&#xff09;的返回值。 在JavaScript中&#xff0c;逻辑运算符 &&&#xff08;逻辑与&#xff09;和 ||&#xff08;逻辑或&#xff09;的返回值可能并不总…

GPT-5 一年半后发布?迎接AI技术变革

人工智能的快速发展正在深刻改变我们的世界。作为AI技术的前沿代表&#xff0c;OpenAI的GPT系列一直备受关注。最新消息显示&#xff0c;GPT-5将于一年半后发布&#xff0c;并被期望达到“博士级”的智能水平。GPT-5的到来不仅预示着AI在技术上的飞跃&#xff0c;也意味着它将在…

浏览器提升编译速度小技巧(一)- 防病毒排除

1.引言 在Chrome开发过程中&#xff0c;编译速度是影响开发效率的关键因素之一。编译一个大型项目如Chrome&#xff0c;往往需要处理大量的代码文件和依赖库&#xff0c;这个过程既复杂又耗时。因此&#xff0c;任何能够提升编译速度的技巧&#xff0c;都能显著提高开发效率&a…

Dubbo本地调试解决方案

有三种方式:原文链接 本文尝试使用了原作者推荐的第二种方式&#xff0c;在启动本地的服务时加入全局版本号的参数 -Ddubbo.service.versiontest同时需要修改消费者侧API的版本号。 DubboReference(version "test")private IContentPortraitService contentPortra…

TypeError: Cannot set properties of null (setting ‘innerText‘)?

TypeError: Cannot set properties of null (setting innerText) 解释&#xff1a; 这个错误表明你尝试给一个null值的对象设置innerText属性。在JavaScript中&#xff0c;null表示一个空值或者“没有对象”&#xff0c;因此不能对其进行属性设置操作。 解决方法&#xff1a…

微信小程序的媒体组件

微信小程序中的媒体组件主要包括音频组件 和视频组件 &#xff0c;它们可以帮助开发者在小程序中嵌入和播放多媒体内容。以下是对这两个组件的详细介绍&#xff1a; 音频组件 组件用于在小程序中播放音频文件。它支持多种配置选项和事件处理。 属性 src: 音频资源的 URL 地址。…