为了合理开发,理理Lifecircle
@1、创建阶段:创建组件类时
// 初始化组件的默认属性defaultProps和属性类型propTypes
static defaultProps = {
autoPlay: false
};
static propTypes = {
autoPlay: React.PropsTypes.bool.isRequired
};
// 使用初始化组件,用this.props,组件内部props只读不可修改,若需要改变props,需其他组件调用时修改
@2、实例化阶段:组件类被调用的时候,触发一系列流程
// 一、构造器函数,初始化控制控件状态的一些变量
constructor(props){
super(props);
this.state = {
mag: ''
}
}
// 二、准备加载组件:生命周期只执行1次,在render之前渲染
componentWillMount(){
//初始化一些操作
static setImageEmpty(){
allTotalImage=[{hasImage: false, title: '综合照片', imageUrl: ''}]
···
}
}
// 三、组件第一次渲染,渲染界面,并返回JSX或其他组件构成Dom,只能返回一个顶级元素
render(){
return(
<View></View>
)
}
// 四、通知组件已加载完成,先调用子组件的这个函数,再调用父组件的这个函数,只调用一次,可以和 JS 其他框架交互了,
componentDidMount(){
this.mounted = true
this.getAddressData()
}
@3、运行更新阶段:用户操作或父组件更新时进行界面调整
// 一、当组件接收到新的props的时候触发该函数,不会触发render()调用
// 参数:nextProps为即将被设置的属性
componentWillReceiveProps(nextProps){
if (!this.state.autoPlay) {
this.getAddressData()
}
this.setState({
msg: 'props改变了'
})
}
// 二、决定是否更新组件,返回bool,若为true,则更新组件,若返回false,则进入等待阶段。默认情况下,这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。
// 参数nextProps组件将更新的属性值,nextState组件即将更新的状态值
ShouldComponentUpdate(nextProps, nextState){
return true;
}
// 三、预备更新组件:界面更新之前可以处理某些业务,不能使用this.setState更新状态。这个函数调用后nextProps,nextState就会分别设置到this.props和this.state中
componentWillUpdate(nextProps, nextState){
}
// 四、调用render(),根据diff算法,渲染界面,生成需要更新的虚拟Dom数据
render(){
return(
<View></View>
)
}
getAddressData(){
if(this.mounted){
this.setState({
});
}
}
// 五、虚拟Dom同步到Dom中后,可以做dom操作
// 除了首次render()调用的是componentDidMount函数,其他render()后都是调用componentDidUpdate函数
componentDidUpdate(){
}
//componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于,前者只有在挂载的时候会被调用;而后者在以后的每次更新渲染之后都会被调用。
//ps:绝对不要在componentWillUpdate和componentDidUpdate中调用this.setState方法,否则将导致无限循环调用。
@4、卸载阶段
// 组件从Dom中移除,解除对应绑定的事件、清除定时器、移除虚拟Dom中对应的组件数据结构、取消网络请求等
componentWillUnmount(){
this.mounted = false
}
@补充信息–来源参考其他作者
触发组件更新的四种情况
1、首次加载的时候会触发更新
2、this.setState状态发生改变时更新
3、父组件的props属性发生改变时更新
4、this.forceUndate强制更新