- props(屬性):是由父組件傳遞給子組件的，而且是單向的傳遞屬性，當(dāng)屬性多的時(shí)候可以進(jìn)行對象的傳遞
- state(狀態(tài)):是組件內(nèi)部維護(hù)的數(shù)據(jù)，當(dāng)狀態(tài)發(fā)生變化時(shí)越败，組件就會(huì)更新，界面就會(huì)隨著state的變化而重新渲染
在ES6風(fēng)格定義props和state
定義props
static defaultProps={
name:'Cral',
age:25
}
定義state
constructor(props) {
super(props);
this.state = {name:'Gates'};
}
Props：組件間的狀態(tài)傳遞
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 HelloWorld extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
定義了Greeting組件誉己，該組件設(shè)置了屬性name眉尸，父組件在調(diào)用Greeting組件是將屬性name傳遞過去域蜗，子組件就會(huì)顯示相應(yīng)的內(nèi)容巨双。
React Native是組件化的，這里把需要的兩個(gè)組件寫在了一起霉祸，可以更直觀的感受到數(shù)據(jù)的傳遞筑累。
state：組件內(nèi)的狀態(tài)改變
import React, {Component} from 'react';
import Child from './components/child'
class App extends Component {
constructor(props) {
super(props);
this.state = {name: 'child'};
this.dataChange = this.dataChange.bind(this);
}
dataChange(){
this.setState({name: 'newChild'})
}
render() {
return (
<div style={{textAlign:'center'}}>
<Text OnClick={this.dataChange}>{this.state.name} </Text>
</div>
);
}
}
export default App;
在組件內(nèi)部可以通過state來設(shè)置組件的初始值，當(dāng)組件的數(shù)據(jù)需要變化時(shí)可以通過設(shè)置setState方法來重新渲染組件自己
