以下文章为了大家能简单看懂学习,已做简化;对待学习还希望大家保持耐心
一.生命周期
每件事物都有自己的生命周期,就好比坐车,总会有起点---途经---终点
1.起点 constructor
构造函数
constructor(props) {
super(props); super关键字,它指代父类的实例(即父类的this对象)
this.state = {date: 2022};
}
复制代码
-
可以不写
constructor
,一旦写了constructor
,就必须在此函数中写super()
-
此时组件才有自己的
this
,在组件的全局中都可以使用this
关键字 -
否则如果只是
constructor
而不执行super()
那么以后的this
都是错的
2.途经 componentWillMount
组件将要挂载时触发
3.途经 render
最重要的一环,就是在里面写入页面的元素
render() { return ( <h1>熊猫开发团队</h1> ); }
复制代码
4.途经 componentDidMount
组件加载完成,这个生命周期方法应该是用的最多的,一般用在进入页面后,数据初始化
5.终点 componentWillUnmount
在组件卸载及销毁之前直接调用;可以做的事如下:
(1)清除定时器
componentWillUnmount(){
clearTimeout(this.timer)
}
复制代码
(2)解绑dom事件
componentWillUnmount(){
window.onScroll = null
}
复制代码
(3)清除网络状态
componentWillUnmount(){
this.setState = (state,callback) => {
return
}
复制代码
二.组件生命周期
1.起点 componentWillReceiveProps
当props发生变化时执行
(1)组件初次渲染时不会执行
(2)在这个函数里面,旧的属性仍可以通过this.props
来获取
(3)此函数可以作为 react 在 prop 传入之后, render() 渲染之前更新 state 的机会。即可以根据属性的变化,通过调用this.setState()来更新你的组件状态,在该函数中调用 this.setState() 将不会引起第二次渲染
2.途经 shouldComponentUpdate
这个生命周期钩子函数默认的返回值是true
,如果是true
就更新视图,为优化性能,当状某个状态将要改变的值与原状态的值一样时不需要更新视图,这样性能更佳
3.途经 componentWillUpdate
组件将要更新数据时触发
componentWillUpdate(newProps,newState,newContext)
- newProps 新的props
- newState 新的State
- newContext 新的context
复制代码
4.途经 render
最重要的一环,就是在里面写入页面的元素
render() { return ( <h1>熊猫开发团队</h1> ); }
复制代码
5.途经 componentDidUpdate
组件数据更新完成时触发
componentDidUpdate(newProps,newState,Snapshot)
- newProps 新的props
- newState 新的State
- Snapshot 由componentWillReceiveProps生命周期返回的快照
复制代码
6.终点 componentWillUnmount
在组件卸载及销毁之前直接调用;可以做的事如下:
(1)清除定时器
componentWillUnmount(){
clearTimeout(this.timer)
}
复制代码
(2)解绑dom事件
componentWillUnmount(){
window.onScroll = null
}
复制代码
(3)清除网络状态
componentWillUnmount(){
this.setState = (state,callback) => {
return
}
复制代码