props和state使用场景
props介绍
在reactnative当中，我们经常会对一个组件进行复用，或者在一个父组件中包裹多个子组件，这时候，我们会遇到二个问题，父、子组件如何完成通信呢？怎么对一个子组件进行重复使用？为了解决这2个问题，props因此而生。
如何通过prpos来进行复用子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| 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来讲解
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| 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 是让外部对组件自己进行配置
