react 组件进阶

目标:1.能够使用props接收数据

            2.能够实现父子组建之间的通讯

            3.能够实现兄弟组建之间的通讯

            4.能够给组建添加props校验

            5.能够说出生命周期常用的钩子函数

            6.能够知道高阶组件的作用

一,组件通讯介绍

组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能,而在这个过程中,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就需要打破组建的独立封闭性,让其与外界沟通,这个过程就是组件通讯。

822dfcc59be642b1a9394152855663d2.png

二,组件的props

组建是封闭的,要接受外部数据应该通过props来实现

props的作用:接收传递给组件的数据

传递数据:给组件标签添加属性

接收数据:函数组件通过参数props接收数据,类组件通过this.props接受数据

d4a1d2f110b844fa87ac4d3726afd579.png

组件的特点:

 1.可以给组件传递任意类型的数据

2.props 是只读的对象,只能读取属性的值,无法修改对象

3.注意:使用类组建时,如果写了构造函数,应该将props传递给super(),否在无法在构造函数中获取到props。

3fc4414ee2dd44b98506f1e22103afda.png

三,组建通讯的三种方式

1.父组件 -> 子组件

1.父组件提供眼传递的state数据

2.给子组件标签添加属性,值为state 中的数据

3.子组件中通过props 接收父组建中传递的数据

3cab4438ae8447d3b999b13ff8fa885c.png

2.子组件 -> 父组件

思路:利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数。

1.父组件提供一个回调函数(用于接受数据)

2.将该函数作为属性的值,传递给子组件

e2273f512f20432d92c88a1893abb8e0.pngd872a0738cfe4bad87816da7ce193181.png

3.兄弟组件

将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态

思路:状态提升

公共父组件职责,1,提供共享状态         2,提供操作共享状态的方法

要通讯的子组建只需要通过 props 接收状态或操作状态的方法

四,Context

思考:App组件要传递数据给Child 组件,该如何处理?

更好的姿势:使用 Context

作用:跨组件传递数据(比如:主题,语言等)

使用步骤:

1.调用React.createContext() 创建Provider(提供数据)和 Consumer (消费数据)两个组件

5a760932d62b4515b66b4e43cba4e732.png

2.使用 Provider 组件作为父节点

d5f5b2e64d6c4f828651c76f0c5f430b.png

3.设置value 属性,表示要传递的数据

55a6543f8a3d4b2d8b959af7617084c8.png

4.调用Consumer 组件接收数据。

3235208822ee49d6a0594e46f767f25f.png

总结:

1.如果两个组件是远方亲戚(比如:嵌套多层)可以使用Context实现通讯

2.Context 提供李两个组件:Provider 和 Consumer 

3.Provider 组件:用来提供数据

4.Consumer组建:用来消费数据

五,props深入

1.children 属性:表示组建标签的子节点。当组件标签有子节点时,props 就会有该属性

   children 属性与普通的props一样,值可以是任意值(文本,React元素,组件,甚至是函数)

 

2.props校验

props校验:允许在创建组建的时候,就指定props的类型,格式等

使用步骤:

1) 安装包:prop-types(yarn add prop-types/npm i prop-types)

2) 导入包 prop-types 包

3)使用组件名.propTypes = {} 来给组件的props添加校验规则

4)校验规则通过PropTypes 对象来指定

约束规则 propType

1)常见类型:array,bool,func,number,object,string

 2) React元素类型:element

 3)必填项:isRequired

 4) 特定结构的对象:shape({})

App.propType = {

        color:PropTypes.array

}

props 默认值 

场景:分页组建 -> 每夜展示条数

作用:给props 设置默认值,在未传入 props 是生效

六,组件的生命周期

概述:组件的生命周期有助于理解组件的运行方式、完成更复杂的组建功能、分析组件错误原因等。

组件的生命周期:组件从被创建到挂载到页面中运行,再到组建不用时卸载的过程。

生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数

只有类组件才有生命周期。函数组件没有生命周期。

生命周期的三个阶段:

1.每个阶段的执行时机

2.每个阶段钩子函数的执行顺序

3.每个阶段钩子函数的作用

创建时:挂载阶段

执行时机:组建创建时(页面加载时)

执行顺序:construcor() ->render() -> componentDidMount

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

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

相关文章

官网下载tomcat

1、Tomcat官网地址: https://tomcat.apache.org/ 2、下载以及安装步骤

HALSTM32通用定时器+EXTI实现单击/双击/长按功能

HALSTM32通用定时器EXTI实现单击/双击/长按功能 ✨在使用USB功率计的时候,发现上面的一个按键实现多画面功能切换,于是探索了一下是如何实现的,将其实现的基本思路以及综合网上收集的相关实现方法,粗陋的整理了一下,将…

windows安装gdal库

提示:在windows上使用pip在cmd终端安装gdal 文章目录 前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 前言 提示:这里可以添加本文要记录的大概内容: 原因是由于丹丹安装使用pip安装gdal时报错Microsoft visual C 1…

从HTTP到Tomcat:揭秘Web应用的底层协议与高性能容器

WEB服务器 1. HTTP协议1.1 HTTP-概述1.1.1 介绍1.2.2 特点 2.2 HTTP-请求协议2.3 HTTP-响应协议2.3.1 格式介绍2.3.2 响应状态码 2.4 HTTP-协议解析 2. WEB服务器-Tomcat2.1 简介2.1.1 服务器概述2.1.2 Web服务器2.1.3 Tomcat 2.2 基本使用2.2.1 下载2.2.2 安装与卸载2.2.3 启动…

C++: 模板初阶

一. 泛型编程 如何实现一个通用的交换函数呢? 参数是不同类型的数据. void Swap(int& left, int& right) {int temp left;left right;right temp; }void Swap(double& left, double& right) {double temp left;left right;right temp; }void Swap(cha…

Vue3-组合式API生命周期函数

一进入页面的请求一律放在setup中执行 如果有些代码需要在mounted生命周期中执行&#xff0c;并且写成函数的调用方式可以调用多次&#xff0c;并不会冲突&#xff0c;而是按照顺序依次执行 <script setup>onMounted(()>{console.log("mounted生命周期函数-逻辑…

<C++> stack queue模拟实现

目录 前言 一、stack的使用 1. 接口说明 2. 例题 二、模拟实现stack 三、queue的使用 四、模拟实现queue 五、deque 总结 前言 LIFO stack 1. 栈是一种容器适配器&#xff0c;专门设计用于在后进先出上下文&#xff08;后进先出&#xff09;中运行&#xff0c;其中元素仅从容器…

Shopee个人能入驻开店吗?Shopee一个站点可以开几个店铺?

Shopee允许每个用户在同一个站点上开设多个店铺&#xff0c;这为商家提供了更多的经营灵活性和选择。同时&#xff0c;Shopee也鼓励个人用户入驻开店&#xff0c;提供便捷的入驻方式和丰富的支持工具。下面来看看具体介绍。 shopee个人能入驻开店吗 与许多电子商务平台相比&a…

基于vue 2.0的H5页面中使用H5自带的定位,高德地图定位,搜索周边商户,覆盖物标记,定位到当前城市

基于vue的H5页面中使用高德地图定位&#xff0c;搜索周边商户&#xff0c;覆盖物标记 首先安装高德地图插件 npm i amap/amap-jsapi-loader --save地图承载容器 <template><div id"container"></div> </template>地图容器样式 <style…

uniapp——项目day05

购物车页面 结算区域 把结算区域封装为组件 1. 在 components 目录中&#xff0c;新建 my-settle 结算组件&#xff1a; 2. 初始化 my-settle 组件的基本结构和样式&#xff1a; <template><view class"my-settle-container">结算组件</view> …

通讯协议学习之路(实践部分):UART开发实践

通讯协议之路主要分为两部分&#xff0c;第一部分从理论上面讲解各类协议的通讯原理以及通讯格式&#xff0c;第二部分从具体运用上讲解各类通讯协议的具体应用方法。 后续文章会同时发表在个人博客(jason1016.club)、CSDN&#xff1b;视频会发布在bilibili(UID:399951374) 本文…

第十九章绘图

Java绘图类 Graphics 类 Grapics 类是所有图形上下文的抽象基类&#xff0c;它允许应用程序在组件以及闭屏图像上进行绘制。Graphics 类封装了Java 支持的基本绘图操作所需的状态信息&#xff0c;主要包括颜色、字体、画笔、文本、图像等。 Graphics 类提供了绘图常用的方法&a…