react组件进阶_react shape-程序员宅基地

技术标签: react  reactjs  

react组件进阶

children 属性

children属性是什么

表示该组件的子节点,只要组件内部有子节点,props中就有该属性

children可以是什么

  1. 普通文本
  2. 普通标签元素
  3. 函数
  4. JSX

props校验

对于组件来说,props是由外部传入的,我们其实无法保证组件使用者传入了什么格式的数据,如果传入的数据格式不对,就有可能会导致组件内部错误,有一个点很关键 - 组件的使用者可能报错了也不知道为什么

  1. 安装属性校验包:yarn add prop-types
  2. 导入prop-types
  3. 使用 组件名.propTypes = {} 给组件添加校验规则
import PropTypes from 'prop-types'

const List = props => {
    
  const arr = props.colors
  const lis = arr.map((item, index) => <li key={
    index}>{
    item.name}</li>)
  return <ul>{
    lis}</ul>
}

List.propTypes = {
    
  colors: PropTypes.array
}

props 校验规则说明

  1. 常见类型:array、bool、func、number、object、string
  2. React元素类型:element
  3. 必填项:isRequired
  4. 特定的结构对象:shape({})
// 常见类型
optionalFunc: PropTypes.func,
// 必填 只需要在类型后面串联一个isRequired
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
    
	color: PropTypes.string,
	fontSize: PropTypes.number
})

props默认值

通过 defaultProps 可以给组件的props设置默认值,在未传入props的时候生效

函数组件

直接使用函数参数默认值

function List({
     pageSize = 10}) {
    
  return (
    <div>
      此处展示props的默认值:{
     pageSize }
    </div>
  )
}

// 不传入pageSize属性
<List />

类组件

使用类静态属性声明默认值,`static defaultProps = {}

class List extends Component {
    
  static defaultProps = {
    
    pageSize: 10
  }
    
  render() {
    
    return (
      <div>
        此处展示props的默认值:{
    this.props.pageSize}
      </div>
    )
  }
}
<List />

组件生命周期

组件的生命周期是指组件从被创建到挂载到页面中运行起来,再到组件不用时卸载的过程,注意,只有类组件才有生命周期(类组件 实例化 函数组件 不需要实例化)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcX94qly-1651135234582)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1650014871805.png)]

生命周期-挂载阶段

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hWlYQM35-1651135234584)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1650014987177.png)]

钩子 函数 触发时机 作用
constructor 创建组件时,最先执行,初始化的时候只执行一次 1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等
render 每次组件渲染都会触发 渲染UI(注意: 不能在里面调用setState()
componentDidMount 组件挂载(完成DOM渲染)后执行,初始化的时候执行一次 1. 发送网络请求 2.DOM操作

生命周期-更新阶段

钩子函数 触发时机 作用
render 每次组件渲染都会触发 渲染UI(与 挂载阶段 是同一个render)
componentDidUpdate 组件更新后(DOM渲染完毕) DOM操作,可以获取到更新后的DOM内容,不要直接调用setState

生命周期-卸载状态

钩子函数 触发时机 作用
componentWillUnmount 组件卸载(从页面中消失) 执行清理工作(比如:清理定时器等)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43806488/article/details/124477782

智能推荐

Objective-c 数字对象(NSNumber)_oc 如何判断一个nsnumber对象是一个什么类型的值-程序员宅基地

文章浏览阅读741次。在Objective-c中有int的数据类型,那为什么还要使用数字对象NSNumber?这是因为很多类(如NSArray)都要求使用对象,而int不是对象。NSNumber就是数字对象,我们可以使用NSNumber对象来创建和初始化不同类型的数字对象。如:[cpp] view plaincopy#import NS_oc 如何判断一个nsnumber对象是一个什么类型的值

我做了个AI碎片知识管理工具...-程序员宅基地

文章浏览阅读565次,点赞25次,收藏13次。我做了个AI碎片知识管理工具,只为让你不再为信息爆炸而焦虑。作为一名独立创业者,我每天都要面对大量的信息。各种文章、视频、网页,像潮水般涌来,让我应接不暇。我尝试过很多方法来管理这些信息,比如用笔记软件、收藏夹、标签等等。但这些方法都治标不治本,要么效率低下,要么难以找到关键信息。。。

windows下docker下安装docker-compose以及配置python环境_windows docker-compose-程序员宅基地

文章浏览阅读6.1k次。docker desktop这东西的更新迭代非常快,通常如果安装失败的原因基本上都是因为你看的博客或者视频太老所导致的,其实自己使用的情况下大多数不需要安装Linux虚拟机,只需要通过docker就可以部署一系列分布式应用1.去docker下载 docker desktop,并注册账号,docker登录的时候用,这教程网上一堆,就不做详细介绍了,本文主要介绍海豚调度的python环境搭建使用,顺嘴要说一下,首先进到海豚调度官网。_windows docker-compose

aarch64-linux-gnu-gcc: error: unrecognized argument in option ‘-mabi=aapcs-linux‘-程序员宅基地

文章浏览阅读6k次,点赞2次,收藏5次。aarch64-linux-gnu-gcc: error: unrecognized argument in option '-mabi=aapcs-linux'aarch64-linux-gnu-gcc: note: valid arguments to '-mabi=' are: ilp32 lp64aarch64-linux-gnu-gcc: error: unrecognized c..._gcc: error: unrecognized argument in option ‘-mabi=aapcs-linux’

odoo16 安装-程序员宅基地

文章浏览阅读840次,点赞11次,收藏14次。brew install [email protected] -- odoo16 如果用python3.12 - 会报错。npm install -g less less-plugin-clean-css #使用node安装依赖。brew unlink [email protected] 可以通过这个, 指导选用版本。Pst 安装路径:/opt/homebrew/var/postgresql@14。python3 -m venv odoo-env —创建虚拟环境。./odoo-bin -s -- 启动odoo。

Jmeter(十四) - 从入门到精通 - JMeter定时器 - 下篇(详解教程)_jmeter连接定时任务-程序员宅基地

文章浏览阅读846次。用户实际操作时,并非是连续点击,而是存在很多停顿的情况,例如:用户需要时间阅读文字内容、填表、或者查找正确的链接等。为了模拟用户实际情况,在性能测试中我们需要考虑思考时间。若不认真考虑思考时间很可能会导致测试结果的失真。例如,估计的可支撑用户数偏小。在性能测试中,访问请求之间的停顿时间被称之为思考时间,那么如何模拟这种停顿呢?我们可以借助JMeter的定时器实现。JMeter中的定时器一般被我们用来设置延迟与同步。_jmeter连接定时任务

随便推点

vue3中文件下载_vue3 解析responseentity 完成下载-程序员宅基地

文章浏览阅读6.3k次,点赞3次,收藏12次。vue3中文件下载可以用原生数据流下载(axios)发个请求从后台拿数据流/*** 例如*/ axios({ method:'post',//请求方式 url:url,//请求地址 responseType:'blob'//文件流将会被转成blob }).then(res => { const blob = new Blob([res.data]);//处理文档流 const fileName = '帮助文档.docx'; const dow_vue3 解析responseentity 完成下载

bug宝典JAVA篇 Caused by: org.quartz.JobPersistenceException: Couldn‘t store trigger_couldn't store trigger 'default.mt_1ohl5mq0w32i5' -程序员宅基地

文章浏览阅读3w次,点赞21次,收藏16次。我将定时任务中改动了一个类的路径,结果服务器起来的时候出现这样的错误org.springframework.context.ApplicationContextException: Failed to start bean 'scheduler'; nested exception is org.springframework.scheduling.SchedulingException: Coul_couldn't store trigger 'default.mt_1ohl5mq0w32i5' for 'default.usersessionti

用imu_utils标定IMU-程序员宅基地

文章浏览阅读812次。https://blog.csdn.net/fang794735225/article/details/92804030#commentBox_imu_utils标定原理

pokepay实体visa卡绑定大陆支付宝线上消费测评#usdt #visa #mastercard-程序员宅基地

文章浏览阅读167次。pokepay实体visa卡绑定大陆支付宝线上消费测评#usdt #visa #mastercard https://m.baidu.com/video/page?

PhpStorm 配置数据库-程序员宅基地

文章浏览阅读223次。点击软件右边的 Database在database的栏目空白部分右键鼠标,然后选择NEW,再选择NEW里面的第一个Data Source然后点击图中圈起的...添加数据库的驱动,这个驱动你要去网上下载下来http://url.cn/WWl1Rd ,这是我分享的下载地址设置URL,NAME,PASSWORD(如果是 windows集成开发环境,一般没有密码,空着,有就填)..._怎么设置让phpstrom 记住数据库密码

SpringBoot 读取配置文件的4种方式_spring 读取配置文件 数组-程序员宅基地

文章浏览阅读1k次。SpringBoot 读取配置文件的4种方式_spring 读取配置文件 数组