首页 > 代码库 > 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(状态)