ReactNative之props基础用法+究极体验

注：本教程针对于有过React/ReactNative开发经验的人群。

一：基本使用

创建一个子组件。

export default class ItemProps extends Component {

导入这个组件并在render中使用。

在另一个组件中导入。

import ItemProps from ' ../pages/ItemProps ';

export default class PropsPage extends Component {

使用：

let params = {

name : ' 小明 ',

phone : ' 1008611 '

}

...

< ItemProps {... params } {... this . state } t = { this . state . text } />

注：直接传参，新语法传参，传函数方法都是可以的，传父类方法子类调用更是可以的。

在item中使用：

render () {

let { name , phone , text , nullnull , t } = this . props ;

直接接收使用就可以了

二：默认参数

用static修饰的defaultProps用来设置默认的props，就是在未拿到props之前显示的内容，不然未拿到值会显示und...

static  defaultProps ={  name :   'XiaoHong'   }

三：参数使用state

在父类中改变这个state，子类中使用了this.state也会跟着改变。

四：约束检查

意思是在子组件设置约束，父组件向子组件传值时，会进行类型判断，如果异常会向控制台抛出异常信息，页面上也会有异常警告弹出。是黄色的异常，并非错误信息。

React.PropTypes自React V15.5起已经被移除了，这个在正式版本中是没有用的，反而会拖慢程序。

在开发过程中，这个还是很有用的。比如合作开发，另一个人不会用这个子组件可以一目了然。

React V15.5之后想使用的话需要导入prop-types包（npm install --save prop-types）

作用可以设定类型和是否必传（isRequired为必传）

/**

* 在这个约束检查里 phone要求number但是我传的是string，所以控制台会抛出类型异常。

*

*/

//React.PropTypes自 React v15.5 起就被移除了,因为约束检查在正式版本拖性能后腿。所以使用prop-types库来进行替换

//导入 npm install --save prop-types

//约束检查 isRequired参数是必选的意思

static propTypes = {

name : PropTypes . string . isRequired ,

phone : PropTypes . number ,

}

注：正式版本中，一定要记得注视调这些代码。

五：基于ES6的延伸操作符

不在赘述，基本使用中有详细的用法。

props支持延伸操作符传值

...params

props 解构

var   { name ,  age }   =   params ;