react-native--04基础组件

Props(属性)

通过属性控制表现

大部分的组件(Components)都可以通过参数灵活的定制它们的行为，这参数被称之为props。

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

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}}/>
    );
  }
}

AppRegistry.registerComponent('Bananas', () => Bananas);

这段代码中的组件是Image， 属性是 source、style。
花括号{}是变量引用的模版语法，它还拥有一个能力就是任何javascript的表达式都能包裹，例如： {\n}、 { {width: 193, height: 110} }、 {VARIABLE}。
注意: style={{ }} 如果理解为 {{ }} 是变量引用是错误的(它不是python)，因为 style 要么支持一个对象，要么支持一个字典，如果填写变量的话应该是{styles.welcome}，如果是一个字典的话 { {width: 193, height: 110} }。

通过属性扩展自定义组件

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

State(状态)

在react native中，通过利用 props 和 state 这两个数据类型，来控制一个组件的数据动态实时的展示，其中props一般用于更新数据，state用于更新表现。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = {showText: true};

        // Toggle the state every second
        setInterval(() => {
            this.setState({ showText: !this.state.showText });
        }, 1000);
    }

    render() {
        let display = this.state.showText ? this.props.text : ' ';
        return (
            <Text>{display}</Text>
        );
    }
}

class BlinkApp extends Component {
    render() {
        return (
            <View>
                <Blink text='I love to blink' />
                <Blink text='Yes blinking is so great' />
                <Blink text='Why did they ever take this out of HTML' />
                <Blink text='Look at me look at me look at me' />
            </View>
        );
    }
}

AppRegistry.registerComponent('rn_practice', () => BlinkApp);

代码分析

1. constructor是EcmaScript 2015版本中新增的特性<构造器>，常用于继承(inheritance 需配合super)和共享属性(properties)。
2. let display = this.state.showText ? this.props.text : ' '; 这里采用了条件运算符， 当 this.state.showText 为True时, 将this.props.text赋值给dispaly，否则将 ' ' 赋值给display。
3. setInterval 是EcmaScript/Javascript中的一个内置函数，用于根据给定时间持续轮询执行内嵌代码块。 setInterval有一个规律，那就是必须等待当前所有代码已经执行完毕后（也就是当前线程空闲之后），才开始执行，并且不会停下来，除非我们明确的指定了clearInterval之后才会停下来。下面提供一个样例代码和结果进行说明：

   文件名testInterval.js

      setInterval(function () {
          console.log('hello world!')
      }, 100);
      
      for (let i=0; i<100000; i++) {
          console.log('hello'+i)
      }
   

   执行文件

   C:\WebstormProjects\ecmascript_practice>node --harmony  testInterval.js
   

   输出结果

   hello0
   hello1
   ...
   ...
   hello99999
   hello world!
   hello world!
   hello world!
   hello world!
   

4. !this.state.showText 这段代码用于取相反值，整一个代码块的意思是，每一秒钟去修改一次setState的只，且每次都是返回相反值。

    // Toggle the state every second
    setInterval(() => {
        this.setState({ showText: !this.state.showText });
    }, 1000);   
   

5. this.state 虽然我没有看到说明，但经测试每次发生变更时，都会重新执行一次render()。这里提供一个样例代码来说明测试结论。
   测试样例代码
   
   测试样例代码

测试日志

测试日志

补充：
<React Native 跨平台移动应用开发>一书中（2.7章节/37-41页），详细的说明了状态的行为和表现。

• render 是渲染UI界面。
• this.state 组件状态，当该状态发生变更后，会要求render重新渲染，通过这种方式达到数据与ui保持一致。