react-native从入门到放弃（3）属性与状态

我们可以为大多数组件定制各种参数，用于定制的这些参数就称为props（属性）。

属性的自定义 Props

以Image 为例，在创建图片的时候，可以传入一个名为source的prop来指定要显示的图片的地址

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

class AwesomeProject extends Component {
  render() {
    let pic = {
      uri: 'https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=ca5abb5b7bf0f736ccf344536b3cd87c/29381f30e924b899c83ff41c6d061d950a7bf697.jpg
    };
    return (
      
    );
  }
}

{pic}外围的一层括号，我们需要用括号来把pic这个变量嵌入到JSX语句中。括号内部为一个js变量或表达式，需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

自定义的组件也可以使用props，在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴，在render函数中引用this.props

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

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

class AwesomeProject extends Component {
  render() {
    return (
      
        
      
    );
  }
}

把name作为一个属性来定制，这样可以复用来制作不同场景的使用，将Greeting写入JSX语句中，用法和内置组件没有任何区别，如果想定义自己的控件将是个不错的选择。

状态 State

props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
你需要在constructor中初始化State(这是ES6的写法，这里忽略早起ES5)，修改时调用setState方法。ES6传送门

这是一个简单的例子，点击控件触发onPress来记录点击次数，顺便看一下state的调用顺序

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

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

    timePlus() {
        let times = this.state.times
        times ++

        this.setState({
            times: times
        })
    }

    //组件即将安装
    componentWillMount() {
        console.log('componentWillMount')
    }
    render() {
        console.log('render')
        return(
        //布局使用创建RN时的默认布局
           
        
          你点了我 {this.state.times} 次
        
      
        )
    }
    //已经安装
    componentDidMount() {
        console.log('componentDidMount')
    }

    //是否需要更新
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate')
        return true
    }

    //将要更新 state
    componentWillUpdate() {
        console.log('componentWillUpdate')
    }

    //已经更新 中间会调用 render()
    componentDidUpdate() {
        console.log('componentDidUpdate')
    }
}
});

我们可以看一下RN的简单生命周期

接下来我点击控件触发 onPress

这里大概就是RN State 一个简单的生命周期
理解
在真正的应用程序中，当服务器或用户输入到达新数据时，可以设置状态。 还可以使用像Redux这样的状态容器来控制数据流。 在这种情况下，将使用Redux来修改状态，而不是直接调用setState。

---

如果无法加载图片，请在info.plst文件中添加如下配置，支持http方式访问

    NSAppTransportSecurity
    
        NSExceptionDomains
        
            qq.com
            
                NSIncludesSubdomains
                
            
            sina.com.cn
            
                NSIncludesSubdomains