Props與State可用于組件間傳值

一.Props

• 在父組件中指定，不可改變屬性值，無提示
• name即為props
  <Room name="小碼哥" />
• name的訪問方式
  this.props.name
• 示例代碼:

    class Room extends Component {
        render() {
            return (
                <View style={styles.viewStyle}>
                     <Text sytle={styles.textStyle}>歡迎來到{this.props.name}直播間</Text>
                </View>
            );
        }
    }
    export default class ReactDemo extends Component {
      render() {
        return (
            <Room name="小碼哥" />
        );
      }
    }

二.State

• 在constructor方法中定義,可改變屬性值，無提示
• constructor中聲明

    constructor(props){
        super(props);

        this.state = {
            listData:[],
            curPage:0
        }
    }

• setState中修改

        this.setState({
            listData:listData
        })

• 示例代碼:

class Room extends Component {

    timeUpdate() {
        var number = this.state.num;
        number++;
        this.setState({
            num : number
        })
    }

    constructor(props){
        super(props);
        this.state = {
            num:1,
        };
        // 創(chuàng)建定時器 1秒 = 1000
        // 這里必須綁定,bind會生成了一個新的函數(shù),并且由綁定者調(diào)用,否則this不明確
        setInterval(this.timeUpdate.bind(this),1000);
    }

    render() {
        return (
            <View style={styles.viewStyle}>
                <Text sytle={styles.textStyle}>歡迎來到{this.props.name}直播間</Text>
                <Text>觀眾數(shù) {this.state.num}</Text>
            </View>
        );
    }
}

三.PropTypes

• 在組件內(nèi)定義，定義屬性類型，有提示，有類型檢查

3.1.聲明屬性

• 引入React框架PropTypes卜壕，只能用于React框架的自定義組件，默認(rèn)JS沒有

import React, { Component,PropTypes } from 'react';

• 必須用static聲明低矮，不在任何方法中, 在組件內(nèi)定義

    static propTypes = {
        name:PropTypes.string,
        age:PropTypes.number
    }

• static用來定義類方法或類屬性

3.2.定義屬性值

• 定義屬性默認(rèn)值時必須用defaultProps

    //定義屬性時設(shè)置初始值
    static defaultProps = {
        name:'xmg',
        age:20
    }

3.3.propTypes定義的類型

# 數(shù)組類型
PropTypes.array

# 布爾類型
PropTypes.bool

# 函數(shù)類型
PropTypes.func

# 數(shù)值類型
PropTypes.number

# 對象類型
PropTypes.object

# 字符串類型
PropTypes.string

# 規(guī)定prop為必傳字段
PropTypes.func.isRequired

# prop可為任意類型
PropTypes.any.isRequired