ReactNative入门之props与state

前一篇博客做了一个helloworld的简单例子。今天，继续RN之旅。学会props与state的使用之后，就可以做组件之间的传值和交互了。这对与RN开发来说十分关键。

Props:
在java中创建对象最先执行的方法是构造函数，在构造函数中我们可以传递参数，作为对象的初始化属性值。在RN中也是一样，一个class加载时最先执行的就是构造函数，也可以传递参数。只是传递的方式不同而已。下面结合代码我们分析props的作用到底是什么？

export default class Entrance extends Component {

    constructor(props) {
      super(props);
    }
    render() {  
        var str = '美女';
        return (
            <View>
                <MyText name ='帅哥' age = '18' ></MyText>
                <Text style={{fontSize:30}}>{str}</Text>
            </View>                      
        );
    }
}

class MyText extends Component{
    constructor(props) {
      super(props);
       for(var key in props){
            console.log("---key:"+key+"---value:"+props[key]);
        }
    }
    render(){
        var name = this.props.name;
        var age  = this.props.age;
        return(
            <View style = {{flexDirection:'row',}}>
                <Text style={{fontSize:30}}>{name}</Text>
                <Text style={{fontSize:30}}>{age}</Text>
            </View>

        );
    }

}

运行结果：

在入口文件中我们引入了自己定义的类MyText,这个类的render函数返回值是一个View标签，view中包含了两个Text标签，一个展示姓名，一个展示年龄。样式我设置的是横向排列。这个姓名和年龄我们并没有在MyText标签中直接定义，而是把他当作一个属性来使用，那么这个属性是如何定义的呢？看Entrance类，我们发现，在入口文件中我们给MyText定义了两个属性值，name和age并为其赋值。传递过去的值传到了那里呢？在MyText中有一个constructor(props)方法，这个方法中的props是一个key:value类型的对象，在MyText中我遍历了props这个对象，打印结果：

—key:name—value:帅哥
—key:age—value:18

在MyText的render函数里，取出了props里存的name和age然后赋给了text标签，这样结果就显示了。顺便说一句，在使用name的时候要使用｛｝括起来，RN的语法规则是这样的，遇到标签执行标签语句，遇到｛｝就执行Reat语句。通过这个例子我想你已经很容易就掌握了props的基本使用了，下面介绍state。

State:
state是状态的意思，所以在state改变的时候RN的组件会重新渲染，这样达到了组件刷新的目的。典型的使用场景是在RN请求网络的时候，由于服务器请求数据是耗时的，所以有些控件会显示默认值，当数据加载完毕之后，在重新刷新组件，这样使用props显然是不能完成需求，state就派上用场了。使用只要在请求数据返回的时候更新组件的state就ok了。还是以上面的例子我们改一下代码：

export default class Entrance extends Component {

    constructor(props) {
      super(props);
      this.state = {
            tag:'美女'
        }
       setInterval(() => {
            this.setState({ tag:'帅哥'});
        }, 2000); 
    }
    render() {  
        var str = this.state.tag;
        return (
            <View>
                <MyText name ='帅哥' age = '18' sex='1'></MyText>
                <Text style={{fontSize:30}}>{str}</Text>
            </View>                      
        );
    }
}

在入口类的构造函数中，我添加了state，state中有一个tag，在rendle函数里先取出tag值，这个时候tag对应的value是“美女”，1s之后，定时器触发将state中的tag改为了“帅哥”，改为帅哥之后重新渲染组件，render函数再次执行，这样效果就变化了。

掌握了props和state之后，又向RN买进了一大步了，哈哈！！！