props和state使用场景

props和state使用场景

 props介绍

在reactnative当中，我们经常会对一个组件进行复用，或者在一个父组件中包裹多个子组件，这时候，我们会遇到二个问题，父、子组件如何完成通信呢？怎么对一个子组件进行重复使用？为了解决这2个问题，props因此而生。

 如何通过prpos来进行复用子组件

import React, { Component } from 'react';
import { Text, View } from 'react-native';


class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}


export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

  首先看这个官方文档给的案例，我们在Greeting组件中将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。通过传给不同的props的值来对同一组件有不同的变化。

 state介绍

上文讲了props，看完了上篇，其实你会感觉到props讲的都是父组件对子组件的控制，那么还需要来对自身变化进行判断，那就是state。


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


一般来说，你需要在constructor中初始化state，然后在需要修改时调用setState方法。


以下通过一个开关来控制背景变化的demo来讲解

import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, } from 'react-native';


export default class HomeView extends Component {


  constructor(props) {
    super(props);
    this.state = { isPoweron: false };


    this.onPowerClick = this._onPowerClick.bind(this);
  }


  _onPowerClick() {
    this.setState({
      isPoweron: !this.state.isPoweron
    });
  }


  render() {
    return (
      <View style={this.state.isPoweron ? styles.Poweron : styles.Poweroff}>
        <TouchableOpacity
          style={styles.btnstyle}
          onPress={this.onPowerClick}
        />
      </View>
    );
  }


}


const styles = StyleSheet.create({
  Poweron: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  Poweroff: {
    flex: 1,
    backgroundColor: 'black',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnstyle: {
    width: 40,
    height: 40,
    backgroundColor: 'red',
  },
});

这个demo通过改变状态来改变背景的变化，state的使用还是很简单的。针对不同的业务需求制定不同的state，同样的state不仅支持bool型，还支持number类型等等。

小结

通过上文的浏览，想必大家都已经有模糊的概念了,乘热打铁大家来对看过的知识进行下吸收。


state的主要作用是用于组件保存、控制、修改自己的可变状态。state在组件的constructor中进行初始化，可以被自身修改，而外部不能访问也不能修改。你可以认为state是一个局部的、只能被自身控制的数据源。我们只需要在相应操作下使用this.setstate方法进行更新，setState会导致组件重新渲染（在下一篇文章中会介绍react-native的生命周期）。


props的主要作用是让使用该组件的父组件可以传入参数来配置子组件。它是外部传进来的配置参数，组件内部无法控制也无法渲染。除非外部组件主动传入新的props（通过redux也算外部传值）。


state和props紧密相连。一个组件可以使用外部传入的 props 来初始化自己的 state。但是它们的职责其实非常明晰分明：
state 是让组件控制自己的状态，props 是让外部对组件自己进行配置