React Native从零开始（三）Props（属性）和State（状态）

React Native从零开始（三）Props（属性）和State（状态）

一、Props（属性）

props是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息（通常由父层组件向子层组件传递）
注意：props对象中的属性与组件的属性一一对应，不要直接去修改props中属性的值

因为官网上已经有了他的基本使用方法，但是可能还是不能够很好的理解Props属性，那么可以看一看下面的使用示例。

1、父组件向子组件参数的传递

首先创建两个自定义的组件ChildName和ChildTel

class ChildName extends Component{
    render(){
        return(
            <Text>{this.props.name}</Text>
        );
    }
}
class ChildTel extends Component{
    render(){
        return(
            <Text>{this.props.tel}</Text>
        );
    }
}

这里的{this.props.tel},{this.props.name},是这两个子控件的属性。然后我们创建一个父组件包含这两个子组件，然后利用这个父组件像子组件传递数据

class Child extends Component{
    render(){
        return(
            <View>
                <ChildName name={this.props.ChildName}/>
                <ChildTel tel={this.props.ChildTel}/>
            </View>
        );
    }
}

这里的name和tel是子组件的属性，然后我们用父组件的属性传递给子组件，那么父组件的属性就是ChildName和ChildTel。也就是说我们设置父组件的属性时那么他的子组件props属性也会被赋值。

 return (
            <Child
                ChildName="小明"
                ChildTel="18912345678"/>
        );

最后的效果如下：

2、...this.props的使用

是props提供的语法糖，可以将父组件的全部属性复制给子组件，也就是说我们不需要为子组件设置属性，利用这个将会把父组件的属性赋予给子组件

   PersonClick (){
        alert("点击效果");
    }
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Person
                name="小明"
                tel="18912345678"
                onPress={this.PersonClick}/>
        );
    }

这个时候我们看到父组件有一个函数是alert输出个字符串，如果我们不使用...this.props那么点击控件，不会有点击效果

    render(){
        return(
            <Text >{this.props.name}</Text>
        );
    }

那么我们加上这句话再来点击可以有点击效果

    render(){
        return(
            <Text {...this.props}>{this.props.name}</Text>
        );
    }

3.this.props.childer

childer是一个例外不是跟组件的属性对应的。表示组件的所有子节点。

因为列表或者控件中的子控件数目，不确定，所以我们需要遍历children，逐项进行设置，使用React.Childer.map方法

返回值：数组对象。

子控件

render(){
        return(
           <View>
               {
                   React.Children.map(this.props.children,function (child) {
                       return (
                           <View>{child}</View>
                       );
                   })
               }
           </View>
        );
    }

父控件

    render() {
        return (
            <Person>
                <Text>小明</Text>
                <Text>18812345678</Text>
                <Text>12岁</Text>
            </Person>
        );
    }

4、设置组件属性的默认值

就是组件在不设置属性的值的时候为其设置一个默认的值ES6语法下的

   render() {
        return (
            <Person/>
        );
    }

子控件

   static defaultProps={
        name:'xxxx',
    };
    render(){
        return(
            <Text>{this.props.name}</Text>
        );
    }

这个时候的显示效果是

二、State（状态）

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

官网的例子写的很容易理解

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);

效果如下