# 组件默认值和数据类型验证
Vue组件中我们知道,父组件向子组件传递值时,是可以传递参数,如果不传递值时还可以给它指定默认值,并且传值时必须传指定类型的值。
# 给组件设置默认属性:
注意:defaultProps是一个静态属性前面 要加static
> 在组件创建之前,会先初始化默认的props属性,这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载候,首先调用 constructor 构造器中的 this.state = {},来初始化组件的状态。
```javascript
//指定默认数据
static defaultProps ={
num:0
}
```
# 类型校验
[官方文档:]([https://react.docschina.org/docs/typechecking-with-proptypes.html](https://react.docschina.org/docs/typechecking-with-proptypes.html)
>注意:
自 React v15.5 起,`React.PropTypes`已移入另一个包中。请使用[`prop-types`库(https://www.npmjs.com/package/prop-types)代替。
我们提供了一个[codemod 脚本](https://react.docschina.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes)来做自动转换。
需要先安装`yarn add prop-types --save`
也是静态属性前面要加static ReactTypes这个名字是为了能区分.
> 校验的目的是为了多人开发,如果传递数据出错会有提示,就请转换成期望的数据.
```javascript
//指定校验
import ReactTypes from 'prop-types'
static propTypes={
num:ReactTypes.number
}
```
# 总结
设置默认值和类型校验和Vue中的目的是一样的。都是为了更好的多人开发。
- webpack复习
- React基础
- 前端三大主流框架对比
- React中几个核心的概念
- React基础语法
- React JSX语法
- React组件
- 普通组件
- 组件通信-父向子传递
- 组件拆成单个文件
- 面向对象复习
- Class组件基础
- Class组件的私有状态(私有数据)
- 案例:实现评论列表组件
- 组件样式管理
- 组件样式分离-样式表
- CSS模块化
- 生命周期
- React组件生命周期
- Counter组件来学习组件生命周期
- 生命周期总结
- 生命周期案例
- React评论列表
- React双向数据绑定
- React版todolist
- 其它提高(了解)
- 组件默认值和数据类型验证
- 绑定this并传参的三种方式
- 祖孙级和非父子组件传递数据(了解)
- React路由
- 路由基础
- 动态路由
- 路由严格模式
- 路由导航定位
- 路由重定向
- 路由懒加载
- WolfMovie项目
- 项目初始化
- AntDesign使用
- 其它相关了解