本章节主要介绍

• 属性
• 状态

属性

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

代码中Image标签有两个属性，source和style，自定义组件怎么定义属性呢？

答案是：不需要定义，直接使用！

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 LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

代码中Greeting为自定义组件，{this.props.name}可以直接使用属性。

个人觉得属性不定义，直接使用，虽然灵活，但是没有规范容易造成混乱。所以建议在自定义组件上写上注释：该组件使用了那些属性，有什么作用等信息。

属性由父组件指定；如果没有指定，直接使用也不会报错。属性一经指定，在组件的整个生命周期中就不会变化了。对于需要改变的数据，我们需要用到状态。

状态

构造组件的时候，需要先初始化状态。想要改变状态，需要调用this.setState方法。

写一个文字不断闪烁的程序：因为文字不会变化，所以使用属性，让父组件指定。显示或隐藏的状态随着时间不断变化，所以应该是一个属性。设置一个定时器，每隔一秒钟设置一下显示状态。

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

class Blink extends Component {
  state = {
    isShowingText: true
  };

  componentDidMount() {
    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState(previousState => {
        return {
          isShowingText: !previousState.isShowingText
        };
      });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    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' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

componentDidMount方法为组件的生命周期方法，他会在组件刚加载完的时候调用一次，以后便不会再调用。类似于Android Activity 的 onCreate 方法。

• 一切页面的变化都是state的变化。
• 必须使用setState()方法改变状态值，直接赋值，如：this.state.likes = 100;无效。
• setState()方法是个合并操作，不会影响其他状态值。
• setState()方法是个异步操作，不会立即生效。