首页 > 代码库 > React Native知识11-Props(属性)与State(状态)
React Native知识11-Props(属性)与State(状态)
一：Props(属性)
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变
通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。下面是一个例子：
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（状态）
我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。
假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到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 }; // 每1000毫秒对showText状态做一次取反操作 setInterval(() => { this.setState({ showText: !this.state.showText }); }, 1000); } render() { // 根据当前showText的值决定是否显示text内容 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(‘BlinkApp‘, () => BlinkApp);
实例2:
import React, { Component } from ‘react‘;import { AppRegistry, Text, TextInput, View } from ‘react-native‘;class PizzaTranslator extends Component { constructor(props) { super(props); this.state = {text: ‘‘}; } render() { return ( <View style={{padding: 10}}> <TextInput style={{height: 40}} placeholder="Type here to translate!" onChangeText={(text) => this.setState({text})} /> <Text style={{padding: 10, fontSize: 42}}> {this.state.text.split(‘ ‘).map((word) => word && ‘??‘).join(‘ ‘)} </Text> </View> ); }}
上面这段代码就可以实现在输入框不停输入内容后，修改state里面的text内容，而且当调用setState时会刷新UI，而用组件Text 可以获得state里面text属性的值；方法constructor是构造方法，根据参数都要实现super;
注意：箭头函数知识点
ES6允许使用“箭头”（=>）定义函数。立即执行函数可以写成箭头函数的形式
// 箭头函数的例子()=>1v=>v+1(a,b)=>a+b()=>{ alert("foo");}e=>{ if (e == 0){ return 0; } return 1000/e;}var f = v => v;上面的箭头函数等同于：var f = function(v) { return v;};如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var f = () => 5;// 等同于var f = function () { return 5 };var sum = (num1, num2) => num1 + num2;// 等同于var sum = function(num1, num2) { return num1 + num2;};如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
var sum = (num1, num2) => { return num1 + num2; }由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
其它相关内容可以见ES里面的文章介绍；
React Native知识11-Props(属性)与State(状态)