理解:
1.组件对象从创建到死亡它会经历特定阶段
2.React组件对象包含一系列钩子函数(s生命周期回调函数)在特定的时刻调用
3.我们在定义组件时,在特定的生命周期回调函数中做特定的工作
补一个知识点:mount是挂载,unmount是卸载。把页面显示出来就是挂载
这里简单说一下:
componentDidMount(){} :组件在挂载完毕时调用。如果有需求我们有一个定时器在页面挂载时就开启,那定时器就可以写在这个函数里
componentWillUnmount(){}:组件即将被卸载时调用
他们和render是兄弟,都是实例调用
小例子:文字组件透明化,点击按钮就卸载该组件
<script type="text/babel">
class Life extends React.Component{
state = {
opacity:1 //透明度
}
//组件挂载完毕时调用
componentDidMount(){//和render函数是兄弟,是实例调用的
console.log(this);
this.timer = setInterval(()=>{
let{opacity} = this.state
opacity = opacity - 0.1
if(opacity<= 0) opacity = 1
this.setState({opacity})
},200)
}
//组件将要被卸载时调用
componentWillUnmount(){
//清空定时器
clearInterval(this.timer)
}
death = ()=>{
//卸载组件
ReactDOM.unmountComponentAtNode( document.getElementById('test'))
}
//初始化渲染、状态更新之后调用
render(){//render调用1+n次
return(
<div>
<h2 style = {{opacity:this.state.opacity}}>React学不会怎么办?</h2>
<button onClick = {this.death}>不活了</button>
</div>
)
}
}
ReactDOM.render(<Life/> , document.getElementById('test'))
</script>
效果:
动态的文字透明度这里就不展示了,就截个图。点击按钮之后:
就没了,卸载组件了