一、简介

在开发中，属性变量类型的验证，几乎是任何语言都必须关注的问题，因为如果传入的数据类型不对，轻者程序运行仅仅是给出警告⚠️，严重的会直接导致程序中断，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. 小白到大神，你需要了解的 sqlite 最佳实践

    本文微信公众号「AndroidTraveler」首发. 背景 本文是对一篇英文文档的翻译,原文请见文末链接. 并发数据库访问 假设你实现了自己的 SQLiteOpenHelper. public cl ...

  2. mysqlbinlog-Note

    binlog_format = mixedlog-bin = /data/mysql/mysql-binexpire_logs_days = 7 #binlog过期清理时间max_binlog_siz ...

  3. HTTP常见响应状态码及解释、常用请求头及解释

    1.HTTP常见响应状态码及解释2XX Success(成功状态码) 200 表示从客户端发来的请求在服务器端被正常处理204 该状态码表示服务器接收的请求已成功处理,但在返回的响应报文中不含实体的主 ...

  4. java之对象类型转换

    基本数据类型之间的转换: 自动类型转换:小的数据类型可以自动转换成大的数据类型: 强制类型转换:可以把大的数据类型转换成小的数据类型:float = (float)32.0; public class ...

  5. Electron桌面项目-解决throw new Error('Electron failed to install correctly, please delete node_modules..

    前言 Electron 是一个用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库.由GitHub开发的. 其原理是 Electron 通过将 Chromium 和 N ...

  6. netcore3.0配置跨域

    netcore3.0框架已集成了Microsoft.AspNetCore.Mvc.Cors包,因此不需要单独引用. 在ConfigureServices中添加Cors策略服务 services.Add ...

  7. 高强度学习训练第十六天总结: Spring框架中的设计模式

    仔细想了想..没必要重复造轮子. 每天复习啥了就直接CTRL CV了 https://gitee.com/SnailClimb/JavaGuide/blob/master/docs/system-de ...

  8. 利用Dynamics 365 Customer Engagement的标准导入功能导入附件。

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  9. SAP OB52会计年度变式

    Var.(Posting Period Variant) 记帐区间变式,每个公司代码对应一个记帐期间变式,多个公司代码可以使用一个相同的记帐期间变式 A(Performance Assistant) ...

  10. arcgis api 4.x for js 图层拓展篇之mapvLayer(附源码下载)

    因为在项目开发过程中,使用的arcgis js api版本是4.7,并不能支持客户端渲染热力图,想到arcgis js api 4.x的渲染是基于canvas,故琢磨着是否能借助类似于mapV.ech ...