ReactNative学习笔记（四）props&state

Props 属性

import React, {Component} from 'react';
import {Image} from 'react-native';
export default class Bananas extends Component {
    render(){
        let pic = {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        };
        return (
            <Image source={pic} style={{width:193,height:110}}/>
        );
    }
}

• 包围pic的大括号的意思是——括号内部是一个js变量或表达式，需要执行后取值。我们可以把任何合法的JavaScript表达式通过括号嵌入到JSX语句中

import React, {Component} from 'react';
import {Text, View} from 'react-native';
class Greeting extends Component{
    render(){
        return (
            <View style={{alignItems:'center', marginTop:50}}>
                <Text>Hello {this.props.name}</Text>
            </View>
        )
    }
}
export default class Bananas extends Component {
    render(){
        return (
            <View>
                <Greeting name='Rexxar'/>
                <Greeting name='Jaina'/>
                <Greeting name='Valeera'/>
            </View>
        );
    }
}

• 自定义组件Greeting的属性name，在组件中使用this.props调用。
• props是在父组件中对目标组件进行指定，且指定后，在目标组件的生命周期 属性值不会再改变。

tips:代码示例中多次出现的 View 组件——常用作其他组件的容器，来帮助控制布局和样式

State 状态

props一经指定后，在组件的生命周期中将不再改变，若需要改变的数据，需要使用state。

import React, {Component} from 'react';
import {Text, View} from 'react-native';
class Blink extends Component{
    // 声明state对象
    state = {isShowingText: true};
    // mount时执行函数
    componentDidMount() {
        setInterval(()=>{
            this.setState({
                isShowingText: !this.state.isShowingText
            });
        }, 1000);
    }
    render(){
        if(!this.state.isShowingText) {
            return null;
        }
        return (
            <Text>{this.props.text}</Text>
        )
    }
}
export default class BlinkApp extends Component {
    render(){
        return (
            <View>
                <Blink text='I love to blink'/>
                <Blink text='Yes blinking is so great'/>
            </View>
        );
    }
}

• 每次调用setState（this.state=xx这样的直接赋值是无效的），BlinkApp就会重新执行render方法，重新渲染；
• state的工作原理和React.js完全一致，可以参阅React.Component API
• 可以使用一些“状态容器”比如Redux来统一管理数据流。
  tips:
setState是异步操作，修改不会马上生效；
setState是merge操作，仅修改指定的属性，不会对其他属性产生影响