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

12人阅读 评论(0) 收藏 举报
分类:

        看了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

           }

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

查看评论

用GDB调试程序(五)

 查看运行时数据———————        在你调试程序时,当程序被停住时,你可以使用print命令(简写命令为p),或是同义命令inspect来查看当前程序的运行数据。print命令的格式是:  ...
  • haoel
  • haoel
  • 2003-07-09 08:30:00
  • 54405

React Native 学习笔记四(关于state的使用)

前面我已经大概写了props和state 的区别  接下来整理下state的使用 需要在constructor中初始化state(译注:这是ES6的写法,早期的很多ES5的例子使用的是getInit...
  • Youth_never_go_away
  • Youth_never_go_away
  • 2016-09-13 13:55:20
  • 4212

混合开发的大趋势之一React Native State (状态),Style(样式)

转载请注明出处:王亟亟的大牛之路先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android 今天又加了几个疑难杂症哦!!上一篇讲了属性...
  • ddwhan0123
  • ddwhan0123
  • 2016-08-18 14:53:39
  • 6085

React-Native 基础(三) 使用State改变状态

参考文档: http://reactnative.cn/docs/next/state.html#content http://reactnative.cn/docs/next/state.htm...
  • KevinsCSDN
  • KevinsCSDN
  • 2016-07-29 10:27:45
  • 5079

react native setState之后的state值不能立即使用

react native setState之后的state值不能立即使用,setState之后,需要走完RN生命周期,也就是走到render时,state的值才会变成setState的值,要立即使用s...
  • xiongqiangwin1314
  • xiongqiangwin1314
  • 2016-12-27 17:14:35
  • 3079

react native AppState 使用详解

AppState:当前app的状态,是在前台还是在后台。 active:应用正在前台运行 background:正在后台运行 inactive:过渡状态,不会在正常的React Native应用中出现...
  • mengks1987
  • mengks1987
  • 2017-05-31 16:29:32
  • 961

react-native的state

在react-native中state扮演着很重要的角色,我们可以在state中存放数据,布局也可以根据state的状态变化而重新渲染布局。在构造方法中初始化stateconstructor(prop...
  • big_sea_m
  • big_sea_m
  • 2017-12-18 17:06:08
  • 27

react-native state

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import Reac...
  • tianxia1202
  • tianxia1202
  • 2018-02-20 01:31:45
  • 104

React Native从零开始(三)Props(属性)和State(状态)

React Native从零开始(三)Props(属性)和State(状态) 一、Props(属性) 首先官网上的介绍:...
  • SuperBigLw
  • SuperBigLw
  • 2017-01-12 15:29:46
  • 6481

React Native开发】React Native 基础之Props(属性)与State(状态)使用讲解

(一).前言 在我们进行React Native开发的时候,有一些基础知识点是非常重要的,例如Props(属性)和State(状态)。所以我们会经常看到一些组件的属性设置以及状态设置以及更新。今天我...
  • binglan520
  • binglan520
  • 2017-04-13 14:15:44
  • 460
    个人资料
    等级:
    访问量: 599
    积分: 156
    排名: 110万+
    文章分类
    文章存档