ReactNative学习笔记(六)——props和state补充

        看了CrazyCodeBoy老师关于props和state的视频,又掌握了一些新的东西。

1.设置默认属性

        对于需要从父组件传递的属性,我们可以在定义组件时,设置一个默认的属性,具体写法如下:

        static defaultProps = {                

            name:'Tom',

            age:16

         }

2.对props的约束和检查

        对于定义出来的组件,你无法要求使用者在使用时传入什么类型的属性,例如你需要一个number类型的年龄,使用者可能会传入一个字符串,所以在定义组件时,可以对props可以通过PropTypes进行约束和检查,具体写法如下

        import PropTypes from 'prop-types';   //先导入PropTypes

        static propTypes = {

            name:PropTypes.string,         //要求name是string类型的

            age:PropTypes.number.isRequired   //要求age是number类型的 ,isRequired要求该属性有值

        }

如果使用者没有按照要求传属性,在程序运行时会在程序底部报黄色的提示

3.props的使用技巧:延展操作符和解构赋值

    例如,你定义了一个组件<PropComponent>,需要name,age,sex三个属性,在使用时你可能这样写:

              let params = {name:'tom',age:16,sex:'男'};

            <PropComponent  name={params.name} age={params.age}  sex={params.sex}/>   

            这种写法比较复杂,使用延展操作符就比较简单了,具体写法如下:

            let params = {name:'tom',age:16,sex:'男'};

            <PropComponent  {...params}/>   //这样可以把3个属性一起传入

        或者你只想传入两个属性的话,可以这样写:

        let{name,age} = params;

         <PropComponent  name = {name}  age = {age}/>   //这样写法用到了结构赋值的方法

4.关于state的初始化

    有两种方式:

    第一种方式:在组件的constructor()方法中初始化:

        constructor(prpos){

            super(props);

            this.state ={

                count:0;     //初始化一个count的state,初始值为0

                }

        }

    第二种方式:

        不在constructor()构造方法中

        在组件的class中,直接写:

        state = {

              count:0;     //初始化一个count的state,初始值为0

           }

        与第一种写法的效果是一样的

阅读更多

没有更多推荐了,返回首页