一、react-native的生命周期
1. getDefaultProps
在组件创建之前，会先调用 getDefaultProps() ，全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 getInitialState() ，来初始化组件的状态。
2. componentWillMount
准备加载组件
3. render
加载组件
4. componentDidMount
组件第一次加载完成后调用
5. componetWillReceiveProps
当组件收到新的属性，调用此方法
6. shouldComponentUpdate
这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。
默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。
7. componentWillUpdate
当组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true ，就会开始准更新组件，并调用 componentWillUpdate()。
需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。
8. componentDidUpdate
在render()之后调用此方法来得到通知
9. componentWillUnmount()
当组件要被界面移除时，调用此方法。在这个方法可以做相关清理工作。
二、props和state
props、state共同来控制组件数据。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
- props：大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。属性定义时要将属性名挂载在this.props对象上，其他组件调用该组件时，需要指定该属性的value。
使用示例：
//在被调用组件中,定义property属性
export default class PropertyView extends Component{
render(){
var property =this.props.property;
var stats= property.bedroom_number+'bed'+property.property_type;
if (property.bathroom_number){
stats+=', '+property.bathroom_number+' '+(property.bathroom_number>1
?'bathrooms':'bathroom');
}
var price =property.price_formatted.split(' ')[0];
return(
<View style={styles.container}>
<Image style={styles.image}
source={{uri:property.image_url}}
/>
<View style={styles.heading}>
<Text style={styles.price}>£{price}</Text>
<Text style={styles.title}>{property.title}</Text>
<Text style={styles.description}>{property.summary}</Text>
</View>
</View>
)
}
}
//调用组件中为property属性赋值
this.props.navigator.push({
title:"PropertyView",
component:PropertyView,
passProps:{
property:property
}
});
- state：在constructor中初始化state,然后在需要修改时调用setState方法。
使用示例：
//在constructor中初始化
constructor(props) {
super(props);
this.state = {
message: ''
};
}
//在需要更新数据的位置
this.setState({
message: 'there was a problem with obtaining your location: ' + error
});
三、navigator
安卓中使用Navigator，IOS使用NavigatorIOS
使用示例：
1.在父组件render()中
render() {
return (
<Navigator
initialRoute={{
title:'Property Finder'
}}
renderScene={(route,navigator)=>{
return<SearchPage/>
}}
/>
);
}
2.在子组件中使用this.props.navigator获得navigator，
并且可以通过push和pop方法来推入或弹出component
this.props.navigator.push({
title: 'Results',
component: SearchResults,
passProps: {
//向要推入组件传递数据
listings: response.listings
}
});
四、ListView
- dataSource:列表的数据源
- renderRow:逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。
- rowHasChanged:必须属性，比较两个item数据
使用示例：
class ListViewBasics extends Component {
// 初始化模拟数据
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
五、学习中遇到的问题
1.在切换React-native项目时，一定要关闭上一个项目的react packager服务窗口，否则会出现如下错误：
Application xxxx has not been registered.This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.
2.相比Java，JavaScript在出现语法错误和bug时，更不容易定位到错误位置，因此在编写JavaScript时一定要更加的细心。
网友评论