一、简介

在开发中，属性变量类型的验证，几乎是任何语言都必须关注的问题，因为如果传入的数据类型不对，轻者程序运行仅仅是给出警告⚠️，严重的会直接导致程序中断，APP闪退或者web页面挂掉，这是很严重的bug问题。如我们所知，JavaScript是一种弱类型的语言，这意味着开发者可以随意地修改变量值的数据类型，而且JavaScript虚拟机对此操作并不会产生异议，虽然这种机制大大地提高了编程的灵活性，但是也隐藏了一个极大的crash风险。React组件为此提供了一种声明和验证属性类型的方法，称为自动属性验证机制。这种机制将会大幅度减少调试时间，能够及时把不正确的属性类型触发警告⚠️，以便开发者准确快速的定位bug，然后进行修复。

二、验证器类型

React内置了自动属性验证器，如下所示：

数组类型     React.PropTyps.array

布尔类型     React.PropTyps.bool

函数类型     React.PropTyps.func

数字类型     React.PropTyps.number

对象类型     React.PropTyps.object

字符串类型   React.PropTyps.string

React也支持自定义属性验证器，可以使用typeof字段和“===”进行判断并抛出异常，例如：

布尔类型 (props, propName) => (typeof props[propName] === "boolean") ?  null : new Error(`${propName} is not boolean`)

函数类型 (props, propName) => (typeof props[propName] === "function") ?  null : new Error(`${propName} is not function`)

数字类型 (props, propName) => (typeof props[propName] === "number") ?  null : new Error(`${propName} is not number`)

对象类型 (props, propName) => (typeof props[propName] === "object") ?  null : new Error(`${propName} is not object`)

字符串类型 (props, propName) => (typeof props[propName] === "string") ?  null : new Error(`${propName} is not string`)
字符类类型和长度限制嵌套 (props, propName) => (typeof props[propName] === 'string') ?
            ((props[propName].length > 5) ? new Error("长度超过5") : null) : new Error(`${propName} is not sring`)

三、验证器声明

React中对属性类型的声明使用了关键字propTypes。对于createClass组件、ES6类组件和无状态函数式组件，它们的声明方式有所区别，如下所示：

createClass组件:

//创建组件

const Component = React.createClass({

    //属性验证声明

    propTypes: {

        title: React.PropTypes.string,

        items: React.PropTypes.array

    }
　　 .........　　

})

ES6类组件：

//创建组件

class Component extends React.Component{

    .........

}

//属性验证声明

Component.propTypes = {

    title: React.PropTypes.string,

    items: React.PropTypes.array

}

无状态函数式组件：

//创建组件

const Component = ({title,items}) => {

    .......

}

//属性验证声明

Component.propTypes = {

    title: React.PropTypes.string,

    items: React.PropTypes.array

}

四、验证器属性限制

React中，在没有提供属性数据的情况下渲染组件会导致JavaScript报错，从而拖垮整个Web应用。对于这种数据缺少的错误，React属性验证器提供了isRequired字段要求属性数据是必须项，如果不填或者为空，React将会在触发错误之前就在控制台发出警告信息，提醒开发者异常原因。如下：

//创建组件

const Component = React.createClass({

    //属性验证声明

    propTypes: {

        title: React.PropTypes.string.isRequired,

        items: React.PropTypes.array.isRequired

    }

　　 .........　　

})

五、简单示例

需求： 定一个动物组件，拥有种族类型属性type，动物数组属性kinds，在Web页面上展示type标题和kinds个数。

1、传入正确的数据，动物数组个数显示正常：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react/react.js"></script>

    <script src="react/react-dom.js"></script>

    <script src="react/browser.min.js"></script>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        const AnimalComponent = React.createClass({

            render(){

                const {type, kinds} = this.props

                const divStyle = {

                    width:400,

                    height:100,

                    backgroundColor:"#DAE",

                    color:"red",

                    textAlign:"center"

                }

                return (

                    <div className="animal" style={divStyle}>

                        <h1>{type}</h1>

                        <p>

                            <span>{kinds.length} kinds animals</span>

                        </p>

                    </div>

                )

            }

        })

        const kinds = ["cat","dog","pig","Cattle","sheep"]

        ReactDOM.render(

            <AnimalComponent type="Breastfeeding animation" kinds={kinds} />,

            document.getElementById("container")

        )

    </script>

</body>

</html>

2、如果将数组kinds当做字符串传入，Web页面虽然没有挂掉，但是动物数组个数却显示异常，如果开发者检查不仔细，那就是线上的bug了：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react/react.js"></script>

    <script src="react/react-dom.js"></script>

    <script src="react/browser.min.js"></script>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        const AnimalComponent = React.createClass({

            render(){

                const {type, kinds} = this.props

                const divStyle = {

                    width:400,

                    height:100,

                    backgroundColor:"#DAE",

                    color:"red",

                    textAlign:"center"

                }

                return (

                    <div className="animal" style={divStyle}>

                        <h1>{type}</h1>

                        <p>

                            <span>{kinds.length} kinds animals</span>

                        </p>

                    </div>

                )

            }

        })

        const kinds = "this is a cat"

        ReactDOM.render(

            <AnimalComponent type="Breastfeeding animation" kinds={kinds} />,

            document.getElementById("container")

        )

    </script>

</body>

</html>

3、如果此时添加属性验证器，再将数组kinds当做字符串传入，Web页面没有挂掉的同时，控制台还会爆出警告，可以及时发现数据问题：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react/react.js"></script>

    <script src="react/react-dom.js"></script>

    <script src="react/browser.min.js"></script>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        const AnimalComponent = React.createClass({

            propTypes: {

                type: React.PropTypes.string,

                kinds: React.PropTypes.array

            },

            render(){

                const {type, kinds} = this.props

                const divStyle = {

                    width:400,

                    height:100,

                    backgroundColor:"#DAE",

                    color:"red",

                    textAlign:"center"

                }

                return (

                    <div className="animal" style={divStyle}>

                        <h1>{type}</h1>

                        <p>

                            <span>{kinds.length} kinds animals</span>

                        </p>

                    </div>

                )

            }

        })

        const kinds = "this is a cat"

        ReactDOM.render(

            <AnimalComponent type="Breastfeeding animation" kinds={kinds} />,

            document.getElementById("container")

        )

    </script>

</body>

</html>

4、如果此时添加属性验证器的同时，还限制属性是isRequried，那么在渲染组件时，不传递参数，Web页面直接会挂掉成空白页了，当然可以提前设置默认参数避免这种问题：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react/react.js"></script>

    <script src="react/react-dom.js"></script>

    <script src="react/browser.min.js"></script>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        const AnimalComponent = React.createClass({

            propTypes: {

                type: React.PropTypes.string.isRequired,

                kinds: React.PropTypes.array.isRequired

            },

            render(){

                const {type, kinds} = this.props

                const divStyle = {

                    width:400,

                    height:100,

                    backgroundColor:"#DAE",

                    color:"red",

                    textAlign:"center"

                }

                return (

                    <div className="animal" style={divStyle}>

                        <h1>{type}</h1>

                        <p>

                            <span>{kinds.length} kinds animals</span>

                        </p>

                    </div>

                )

            }

        })

        ReactDOM.render(

            <AnimalComponent/>,

            document.getElementById("container")

        )

    </script>

</body>

</html>

5、如果此时添加自定义的属性验证器，再将数组kinds当做字符串传入，Web页面没有挂掉的同时，控制台还可以弹出自定义的警告信息：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react/react.js"></script>

    <script src="react/react-dom.js"></script>

    <script src="react/browser.min.js"></script>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        const AnimalComponent = React.createClass({

            propTypes: {

                type: React.PropTypes.string,

                kinds: (props, propName) =>

                        (typeof props[propName] === 'string') ? new Error(`${propName} is not array`) : null

            },

            render(){

                const {type, kinds} = this.props

                const divStyle = {

                    width:400,

                    height:100,

                    backgroundColor:"#DAE",

                    color:"red",

                    textAlign:"center"

                }

                return (

                    <div className="animal" style={divStyle}>

                        <h1>{type}</h1>

                        <p>

                            <span>{kinds.length} kinds animals</span>

                        </p>

                    </div>

                )

            }

        })

        const  kinds = "this is a cat"

        ReactDOM.render(

            <AnimalComponent type="Breastfeeding animation" kinds={kinds} />,

            document.getElementById("container")

        )

    </script>

</body>

</html>

React: React的属性验证机制的更多相关文章

  1. React 学习(二) ---- props验证与默认属性

    在上一节中, 我们提到了props, 组件之间数据的传递使用props. 我们调用组件时可以设置props, 组件内部通过props获取. 为了props 使用更加友好, React 提供了简单的验证 ...

  2. React库protypes属性

    Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性.当向 ...

  3. 【React系列】Props 验证

    Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效.当向 props 传入无效 ...

  4. React组件的防呆机制（propTypes）

    Prop验证 随着应用不断变大,为了保证组件被正确使用变得越来越重要.为此我们引入propsTypes.React.PropTypes提供很多验证器(valodator)来验证传入的数据的有效性.当向 ...

  5. react第九单元(propTypes验证)

    第九单元(propTypes验证) #课程目标 理解类型验证的必要性 灵活掌握类型验证的使用 #知识点 在给react组件传属性的的时候,我们可以定义属性的类型,此时我们需要下载prop-types这 ...

  6. 从零开始学前端，React框架背后的核心机制和原理JSX

    什么是React React是起源于Facebook的一个前端框架,用于构建用户界面的JavaScript库,Facebook用来探索一种更加高效优雅的Javascript MVC框架来架设Insta ...

  7. HTML5 number类型文本框step属性的验证机制——张鑫旭

    我在下一盘很大的棋,本文只是其中的一个棋子. 需要提前知道的: 目前而言,对step雄起的浏览器为IE10+, Chrome以及Opera浏览器. 需要预先知道number类型input的一些基本知识 ...

  8. React Native声明属性和属性确认

    属性声明 因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候 ...

  9. react的三大属性

    react的三大属性 state props  refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...

随机推荐

  1. 【Android】Android Studio NDK 开发

    Android Studio NDK 开发 记录在Android Studio中NDK简单开发的步骤 用到的Android Studio版本为3.5. 配置NDK 下载NDK 一般在SDK下已经有自带 ...

  2. Markdown语法教程

    标题 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 效果如下: 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 段落 换 ...

  3. react官方脚手架添加less配置

    装两个包 npm install --save less less-loader 在node-modules/react-scripts/config/webpack.config.js中 在大概58 ...

  4. Qt的诞生和本质

    有没有发现,在这个主函数里面没有了消息循环了.消息循环到哪里去了呢? 我们知道,每个GUI应用程序都有消息循环,一般都需要将消息循环while那个函数写到main的最后位置.那既然如此,为了代码复用, ...

  5. day97_11_29

    一.数据存储到mongodb 爬取的数据如果需要存储到mongodb中,要通过item,定义一个存储类.再yield一个类. 数据存储的时候需要进过pipelines,再到setting中配置. fr ...

  6. 23.login1(SKCTF)

    没有账号?注册一个试一试~ 题目提示用SQL约束攻击,那么什么是SQL约束攻击呢? 约束攻击的原理就是注册用户名为'admin    '(有多个空格)的账号,密码'*******'(密码可以自定义,符 ...

  7. 第04组 Beta冲刺（1/4）

    队名:斗地组 组长博客:地址 作业博客:Beta冲刺(1/4) 各组员情况 林涛(组长) 过去两天完成了哪些任务: 1.分配展示任务 2.收集各个组员的进度 3.写博客 展示GitHub当日代码/文档 ...

  8. Redux Class(immutable Record)引入的必要性 && Navigation引入方式

    我的意见 和大家讨论一下几个问题 1. 项目里面没有用class规定的请求数据结构,调试数据的时候无法从前端获取请求的数据格式,要看后端接口,增加了调试的难度.我们以前会用immutable Reco ...

  9. java之this关键字和super关键字的区别

    编号 区别点 this super 1 访问属性 访问本类中的属性,如果本类没有此 属性则从父类中继续查找 访问父类中的属性 2 调用方法 访问本类中的方法 直接访问父类中的方法 3 调用构造器 调用 ...

  10. 用 Python 图像识别打造一个小狗分类器

    ​ 项目介绍 小狗分类器可以做什么? 通过这个分类器,你只需要上传照片,就可以得到小狗的品种,以及更多的信息. 这就是所谓的「机器学习」,让机器自己去“学习”.我们今天要做的这个分类任务,是一个“监督 ...