1). 生命周期相关函数
函数 | 说明 |
---|---|
void componentWillMount() | 该函数只会被执行一次,在初始化渲染之前执行,它执行完成之后,render函数会马上被React Native框架调用 |
ReactClass render() | 该函数会被执行多次,返回我们的UI组件信息 |
void componentDidMount() | 该函数之后执行一次,在组件初始化渲染完成之后被调用 |
void componentWillReceiveProps(nextProps) | ReactNative组件收到新的props时,这个函数会被回调,回调的参数nextProps就是新的props |
bool shouldComponentUpdate(nextProps, nextState) | ReactNative组件收到新的props或者新的state时,这个函数将被调用,它接收2个参数,第一个是新的props,第二个是新的state,这个函数还需要返回一个bool值,用来告诉ReactNative框架针对这次改变,ReactNative是否需要重新渲染本组件 |
void componentWillUpdate(nextProps, nextState) | 在ReactNative框架重新渲染ReactNative组件之前会调用这个函数。开发者可以在和这个函数中为即将发生的重新渲染做一些准备,但开发者不能在这个函数中通过this.setState再次改变状态机变量的值 |
void componentDidUpdate(prevProps, prevState) | React Native框架在重新渲染ReactNative组件完成之后调用这个函数,传入两个参数时渲染前的props和state |
void componentWillUnmount() | 在React Native组件被卸载之前这个函数将执行 |
2). 执行流程
I. 首次进入:componentWillMount -> render -> componentDidMount
II. 改变state:shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
III. 改变props:componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
IV. 页面销毁:componentWillUnmount
3). 测试代码
import React, {Component} from 'react';
import {
Button,
StyleSheet, Text,
View
} from 'react-native';
/**
* @FileName: ComponentLifecycle
* @Author: mazaiting
* @Date: 2018/6/13
* @Description: 组件的声明周期
*/
class ComponentLifecycle extends Component {
/**
* 1. 定义属性的默认值
* 调用时使用this.props.value
* @type {{value: string}}
*/
static defaultProps = {
value: 'mazaiting'
};
/**
* 2. 构造函数
* @param props
*/
constructor(props) {
super(props);
/**
* 初始化状态
* @type {{value: string}}
*/
this.state = {
value: 'initial state.'
}
}
/**
* 3. 挂载组件,该函数在组件的声明周期中只执行一次
*/
componentWillMount() {
console.log('componentWillMount')
}
/**
* 4. 渲染界面
*/
render() {
console.log('render');
return (
<View style={styles.container}>
<Text>属性初始值:{this.props.value} {'\n'} 状态初始值:{this.state.value}</Text>
<Button
title={'改变state'}
onPress={() => {
this.setState({value: 'changed'})
}}
/>
</View>
)
}
/**
* 5. 完成组件挂载,该函数在组件的声明周期中只执行一次
*/
componentDidMount() {
console.log('componentDidMount')
}
/**
* 组件渲染完成,接收到新的props时,函数被调用
* @param nextProps 新配置
*/
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps:' + nextProps.value)
}
/**
* PureComponent不能重写此方法,只能在Component中重写
* 组件接收到新的state或props时,函数被调用
* @param nextProps 新的配置
* @param nextState 新的状态
* @return 是否重新渲染本组件
*/
shouldComponentUpdate(nextProps, nextState) {
console.log('shouldComponentUpdate');
return true
}
/**
* 准备更新组件
* @param nextProps 新配置
* @param nextState 新状态
*/
componentWillUpdate(nextProps, nextState) {
console.log('componentWillUpdate')
}
/**
* 组件更新完成
* @param prevProps 之前的配置
* @param prevState 之前的状态
*/
componentDidUpdate(prevProps, prevState) {
console.log('componentDidUpdate')
}
/**
* 组件被卸载之前调用
*/
componentWillUnmount() {
console.log('componentWillUnmount')
}
}
/**
* 样式属性
*/
const styles = StyleSheet.create({
container: {
backgroundColor: '#DDD'
}
});
/**
* 测试改变ComponentLifecycle组件的props后的回调函数是否执行
*/
class ComponentLifecycleWrapper extends Component {
state={
value: 'from parent'
};
render() {
return(
<View style={styles.container}>
<ComponentLifecycle {...this.state}/>
<Button
title='改变props'
onPress={() => {
this.setState({
value: 'changed'
})
}}
/>
</View>
)
}
}
AppRegistry.registerComponent('abcd', () => ComponentLifecycleWrapper);
4). 界面
![3110861-f1e3f6487d232420.png](https://i-blog.csdnimg.cn/blog_migrate/076016a6ec37be4722d730818dc23067.webp?x-image-process=image/format,png)
图1.png
5). 首次进入
![3110861-08b442e352c91841.png](https://i-blog.csdnimg.cn/blog_migrate/841d1159f558fbdafb754a583b78c7ec.webp?x-image-process=image/format,png)
图2.png
6). 改变state
![3110861-dbc7f992a07a0fce.png](https://i-blog.csdnimg.cn/blog_migrate/a192bf091865416e5ad81702e99c1837.webp?x-image-process=image/format,png)
图3.png
7). 改变props
![3110861-ccf5ecf7845416e2.png](https://i-blog.csdnimg.cn/blog_migrate/a8d05856080e65a2abb2731bc28145e2.webp?x-image-process=image/format,png)
图4.png
8). 整个的一个流程
![3110861-67efa74f2c3f7dc6.png](https://i-blog.csdnimg.cn/blog_migrate/a158ac5ba4ebcfa0208b466d024c25d7.webp?x-image-process=image/format,png)
图5.png
9). state(状态) 和 props(属性)
React Native使用state和props来控制组件
I. props
- 属性静态指定
static defaultProps = {
value: 'mazaiting'
};
- 属性动态传入
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' />
</View>
);
}
}
II. state
- 初始化
在构造函数中去初始化state
constructor(props) {
super(props);
/**
* 初始化状态
* @type {{value: string}}
*/
this.state = {
value: 'initial state.'
}
}
- 修改值
在组件中使用this.setState()方法来修改状态值,当状态被修改后,界面会被自动更新
this.setState({value: 'changed'})