react学习记录-PropTypes 和组件参数验证

文章目录

    • PropTypes 和组件参数验证
      • PropTypes

PropTypes 和组件参数验证

JavaScript 语言的弱类型,让我们写代码很爽,但是也很容易出 bug。

变量没有固定类型可以随意赋值,在我们构建大型应用程序的时候并不是什么好的事情。你写下了 let a = {} ,如果这是个共享的状态并且在某个地方把 a = 3,那么 a.xxx 就会让程序崩溃了。而这种非常隐晦但是低级的错误在强类型的语言例如 C/C++、Java 中是不可能发生的,这些代码连编译都不可能通过,也别妄图运行。

大型应用程序的构建其实更适合用强类型的语言来构建,它有更多的规则,可以帮助我们在编写代码阶段、编译阶段规避掉很多问题,让我们的应用程序更加的安全。JavaScript 早就脱离了玩具语言的领域并且投入到大型的应用程序的生产活动中,因为它的弱类型,常常意味着不是很安全。所以近年来出现了类似 TypeScript 和 Flow 等技术,来弥补 JavaScript 这方面的缺陷。

React.js 的组件其实是为了构建大型应用程序而生。但是因为 JavaScript 这样的特性,你在编写了一个组件以后,根本不知道别人会怎么使用你的组件,往里传什么乱七八糟的参数,例如评论组件:

class Comment extends Component {
  const { comment } = this.props
  render () {
    return (
      <div className='comment'>
        <div className='comment-user'>
          <span>{comment.username} </span></div>
        <p>{comment.content}</p>
      </div>
    )
  }
}

但是别人往里面传一个数字你拿他一点办法都没有:

<Comment comment={1} />

PropTypes

React.js 就提供了一种机制,让你可以给组件的配置参数加上类型验证,就用上述的评论组件例子,你可以配置 Comment 只能接受对象类型的 comment 参数,你传个数字进来组件就强制报错。我们这里先安装一个 React 提供的第三方库 prop-types

npm install --save prop-types

它可以帮助我们验证 props 的参数类型,例如:

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object
  }

  render () {
    const { comment } = this.props
    return (
      <div className='comment'>
        <div className='comment-user'>
          <span>{comment.username} </span></div>
        <p>{comment.content}</p>
      </div>
    )
  }
}

注意我们在文件头部引入了 PropTypes,并且给 Comment 组件类添加了类属性 propTypes,里面的内容的意思就是你传入的 comment 类型必须为 object(对象)。这时候如果再往里面传入数字,浏览器就会报错。

虽然 propTypes 帮我们指定了参数类型,但是并没有说这个参数一定要传入,事实上,这些参数默认都是可选的。可选参数我们可以通过配置 defaultProps,让它在不传入的时候有默认值。但是我们这里并没有配置 defaultProps,所以如果直接用 <Comment />不传入任何参数的话,comment 就会是 undefinedcomment.username 会导致程序报错

我们可以通过 **isRequired **关键字来强制组件某个参数必须传入:

...
static propTypes = {
  comment: PropTypes.object.isRequired
}
...

React.js 提供的 PropTypes 提供了一系列的数据类型可以用来配置组件的参数:

PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.node
PropTypes.element
...

更多类型及其用法可以参看官方文档: Typechecking With PropTypes - React。

组件参数验证在构建大型的组件库的时候相当有用,可以帮助我们迅速定位这种类型错误,让我们组件开发更加规范。
另外也起到了一个说明文档的作用,如果大家都约定都写 propTypes ,那你在使用别人写的组件的时候,只要看到组件的 propTypes 就清晰地知道这个组件到底能够接受什么参数,什么参数是可选的,什么参数是必选的。

热门文章

暂无图片
编程学习 ·

Unity的学习(二):打砖块

一、新建项目创建成功后,进入了如下界面。二、场景的设计 在Hierarchy中鼠标右键创建Plane(地面)游戏物体,将其Transform组件重置,并将游戏物体重命名为Ground,如下图所示。调整地面的大小。在Assets下创建文件夹Materials,并在其中创建Ground的Material(材质)并在Gro…
暂无图片
编程学习 ·

现代化程序开发笔记(13)——Git与Monorepo

本系列文章以我的个人博客的搭建为线索(GitHub 仓库:Evian-Zhang/evian-blog),记录我在现代化程序设计中的一些笔记。在这篇文章中,我将简要介绍代码版本管理利器Git,同时谈一谈Monorepo的工作方式。 代码版本管理工具 作为开发者,我们通常会遇到两种写代码的场景:一种…
暂无图片
编程学习 ·

Centos Linux 服务器怎么在服务器内部访问网站?

有些时候,测试需要,想在服务器内部访问自己的网站看看能否正常打开。Windows的服务器一般直接http://localhost/,或者网址就可以了。没有安装桌面环境的Linux怎么办呢?curl http://www.xyservice.com就可以访问http://www.xyservice.com这个网址了。当然,是直接把网页源代…
暂无图片
编程学习 ·

vue项目实现路由按需加载(路由懒加载)的3种方式

vue异步组件es提案的import()webpack的require,ensure()vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件/* vue异步组件技术 */ {path: /home,name: home,component: resolve => re…
暂无图片
编程学习 ·

进程保活

进程保活一.为什么需要进程保活二.进程优先级前台进程(Foreground process)可见进程(Visible process)服务进程(Service process)后台进程(Background process)空进程(Empty process)三.保活方式1. 利用 Notification 提升权限2. 利用系统Service机制拉活3. 添加Manifest文件属…
暂无图片
编程学习 ·

CQF笔记M1L3泰勒级数和转移概率密度函数

CQF笔记M1L3泰勒级数和转移密度函数Module 1 Building Blocks of Quant FinanceLecture 2 Taylor Series and Transition Density Functions泰勒级数期权价格的泰勒级数trinomial random walk和转移密度函数Similarity solutions 求解过程 Module 1 Building Blocks of Quant F…
暂无图片
编程学习 ·

Hadoop(七)——中下下

shuffle MapReduce的shuffle分为map阶段的shuffle和reduce阶段的shuffle,下面就分别来做介绍。 map阶段的shuffle: 之前我们学的是map阶段并不是直接把数据给reduce,而是会把数据分好,该分区的分区,该封装的封装,该合并的合并再给到reduce,下面就来详细介绍这个过程。1.…
暂无图片
编程学习 ·

6台路由器ospf+rip实验

一、环境OSPF路由协议是一种典型的链路状态(Link-state)的路由协议,一般用于同一个路由域内。在这里,路由域是指一个自治系统(Autonomous System),即AS,它是指一组通过统一的路由政策或路由协换路由信息的网络。在这个AS中,所有的OSPF路由器都维护一个相同的描述这个A…
暂无图片
编程学习 ·

String类

String类的subString方法从指定位置截取到字符串结尾 substring (int beginIndex) :返回一个子字符串,从beginIndex开始截取字符串到字符串结尾。 eg:str1.subString(5)//从第6个位置开始截取截取指定范围的内容 substring (int beginIndex, int endIndex) :返回一个子字符…
暂无图片
编程学习 ·

从永远到永远-SpringCloud项目实战(七)-前端框架NUXT

1、什么是服务端渲染 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据。 服务器端渲染(SSR)的优势主要在于:更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 如果你的应用程序初始展示 loading 菊花图,…
暂无图片
编程学习 ·

elasticsearch开启内存锁定

在elasticsearch配置文件中,如果没有修改bootstrap.memory_lock 参数的话,默认为false,会导致elasticsearch缓存的文件频繁的被交换出去,从而导致在查询过程中频繁的读取磁盘,磁盘IO很高。 如何开启内存锁定? 以下修改均是基于CentOS 7.3系统 官网地址:https://www.elas…
暂无图片
编程学习 ·

OpenVino cmake error

问题描述:安装OpenVino后运行Demo时CMake出错When I try to run the demo, during the inference engine build, I get an error related to cmakeI installed cmake on windows. I have windows 10 OS and VS 2015. Kindly advice how I can get rid of this error and make …
暂无图片
编程学习 ·

PHP用户连续签到赠送额外积分

目录一、需求1、为什么要赠送积分2、怎么获取积分3、积分如何使用1)、兑换2)、抵扣3)、等等二、规则1、用户注册2、成功邀请新用户3、用户签到4、联想三、数据表1、用户表 user2、用户签到表 user_sign3、积分(获取)日志表 integral_log四、代码1、用户签到方法2、公共类 …
暂无图片
编程学习 ·

Unity通过代码实现预制体Apply保存

if (PrefabUtility.GetPrefabParent(weaponPanel.gameObject) != null) {PrefabUtility.ReplacePrefab(weaponPanel.gameObject,PrefabUtility.GetPrefabParent(weaponPanel), ReplacePrefabOptions.ConnectToPrefab); }
暂无图片
编程学习 ·

剑指 Offer 03. 数组中重复的数字

剑指 Offer 03. 数组中重复的数字 难度:简单 题目描述解题思路 1、简单哈希 因为数组范围确定,所以可以用一个很简单的数组来代替哈希表 public int findRepeatNumber(int[] nums) {int n = nums.length;int[] count = new int[n];for (int i = 0; i < nums.length; i++) …
暂无图片
编程学习 ·

使用MapReduce实现join操作

文章目录一.概述二.需求三.map+reduce实现join四.MapReduce Map端 join实现原理(没有reduce处理) 一.概述 熟悉SQL的读者都知道,使用SQL语法实现join是很简单的,只需要一条SQL语句即可,但是在大数据场景下使用MapReduce编程模型实现join还是比较繁琐的在实际生产中我们可以借助…
暂无图片
编程学习 ·

【华为云技术分享】玩转华为物联网IoTDA服务系列六-恒温空调

摘要:本文主要讲述空调接入到物联网平台后,通过恒温空调控制系统,不论空调是否开机,都可以调整空调默认温度,待空调上电开机后,自动按默认温度调节。场景简介通过恒温控制系统,不论空调是否开机,都可以调整空调默认温度,待空调上电开机后,自动按默认温度调节。该场景…
暂无图片
编程学习 ·

sql注入学习笔记(1)--sqlmap参数介绍

前言 最近停更了一段时间,主要是重新学习了一下sqlmap sqlmap真的是sql注入最好的工具,不管是linux还是window环境,都是最好的 可能sqlmap是终端命令模式,用起来体验可能没有上面某些软件好,但功能很完善,还是好好学习一下吧 sql注入 sql注入是个很老的漏洞,晚上对于这个…