react native学习笔记6——Props和State

Props（属性）和State（状态）是React Native中很重要的两个概念。使用Props和State，结合前面学的基本组件如View、Image、 Text、 FlatList等可以实现各种自定义组件、酷炫的UI效果。

Props（属性）

props是组件中不可变的属性。官网的定义：大多数组件在创建时就可以使用各种参数来进行定制，用于定制的这些参数就称为props。

props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变(这类似于Java中的final声明的变量，一经声明，则不能再改变了)。

从上面两句话中我们可以看出，props是组件自身的属性，但它是由父组件指定并向子层组件传递的，组件自身是不能指定自己的属性，也不能修改props。

组件之间唯一的交互途径就是props，因此props也是父组件与子组件通信的桥梁。

下面用一个简单的小例子来介绍属性的用法：
首先创建一个自定义的组件Car

class Car extends Component {
    render() {
        return (
            <View style={ {flexDirection:'row'}}>
                <Text>车名: {this.props.carname}  </Text>
                <Text>车牌号: {this.props.carnumber}</Text>
            </View>
        );
    }
}

示例中的this.props.carname、this.props.carnumber是Car的两个属性车名和车牌号。然后再创建一个父组件CarShop包含这个子组件，并定制子组件属性。

export default class CarShop extends Component {
    render() {
        return (
            <View style={ {height:40, backgroundColor:"darkgray"}}>
                <Car carname="benz" carnumber="HGJ1234"/>
                <Car carname="audi" carnumber="HGK7889" />
             </View>
        );
    }
}

最后效果如下：

该示例完整源码：PropsDemo

而我们很多时候都有需要动态修改界面的需求，这时就需要借助State（状态）了。

State （状态）

state是组件内部的状态属性，通过其名称我们也可以看出，状态是可以动态改变的，state可以由组件自身去维护。props在组件的生命周期中不再改变，对于需要改变的数据我们可以用state来管理维护。

通常我们需要在constructor中初始化state，在需要修改的地方调用系统定义的setState方法，每次调用setState后都会更新组件的状态，触发render方法重新渲染界面。

可能网上有些早期的示例代码初始化state是用getInitialState方法，这是ES5的写法，会逐渐被淘汰。从ES6开始在constructor构造函数中初始化state。

还是继续上面的例子，通常汽车的名字和车牌是不会改变的，但是汽车价格却是会变化的，这里新加一个属性价格。

class Car extends Component {
    constructor (props) {
        super(props);
        this.state = {
            price: props.defaultprice
        };
    }
    //每次点击价格，价格加10万
    _setPrice() {
        this.setState(previousState => {
            return { price: previousState.price+10 };
        });
    }
    render() {
        return (
            <View style={ {flexDirection:'row'}}>
                <Text>车名: {this.props.carname}  </Text>
                <Text>车牌号: {this.props.carnumber}  </Text>
                <Text onPress={this._setPrice.bind(this)} style={{ backgroundColor:"yellow"}}>
                    价格: {this.state.price} 万</Text>
            </View>
        );
    }
}

在Car新加了一个构造函数，获取父组件设定的props的默认价格作为该车的初始价格。

   constructor (props) {
        super(props);
        this.state = {
            price: props.defaultprice
        };
    }

新增了一个Text显示汽车价格:

 <Text onPress={this._setPrice.bind(this)} style={{ backgroundColor:"yellow"}}>
                    价格: {this.state.price} 万</Text>

对该Text设置了点击事件处理_setPrice，每次点击该车价格加10万(嚯嚯这个加得有点猛)。

_setPrice() {
      this.setState(previousState => {
            return { price: previousState.price+10 };
      });
}

然后对父组件CarShop进行改造，新增为Car指定默认价格defaultprice

export default class StateDemo extends Component {
    render() {
        return (
            <View style={ {height:40, backgroundColor:"darkgray"}}>
                <Car carname="benz" carnumber="HGJ1234" defaultprice={25} />
                <Car carname="audi" carnumber="HGK7889" defaultprice={20} />
            </View>
        );
    }
}

最终效果如下：

在非constructor方法中使用this.state = { price: props.defaultprice };的写法会报如下警告：

所以在除constructor外需要修改state的地方调用系统定义的setState方法。

该示例完整源码: StateDemo.js

总结

props——不可变属性，组件自己不可以自己修改props，由父组件指定。
state ——可变状态，组件自己可修改自己的state。