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买进了一大步了，哈哈！！！