例子:
点击按钮,文字从0变为1,再从1变为0
点击按钮,让组件消失
- 给按钮加点击事件
- 卸载组件 API:unmountComponentAtNode
class Life extends React.Component{
// 挂载:mount
// 卸载:unmount
leave = ()=>{
// 卸载
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
render(){
return(
<div>
<h1>React学不会怎么办?</h1>
<button onClick={this.leave}>不活了</button>
</div>
)
}
}
改变文字的透明度
- 谁能驱动页面的更新?状态中的数据。所以在state中添加透明度的变量。
- 怎么让这个state中的opacity驱动页面透明度呢?给文字添加样式
state = {
opacity:1
}
// 挂载:mount
// 卸载:unmount
leave = ()=>{
// 卸载
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
render(){
return(
<div>
<h1 style={{opacity:this.state.opacity}}>React学不会怎么办?</h1>
<button onClick={this.leave}>不活了</button>
</div>
)
}
}
实现从完全可见到彻底消失,耗时2s
- 开启一个循环定时器,每次减少0.1。循环定时器每200ms减少0.1。
我们将定时函数写到类中发现报错了,注意类中是不可以随便写代码的。类中可以写:构造器、自定义函数、赋值语句、static声明的赋值语句。
所以定时方法不能写在这。我们能放在leave中吗?都已经卸载组件了,好像不太合适。那我们只能写到render方法中了。写在return底下合适吗?都已经return了,下面的代码不执行了,好像也不太合适。所以只能写在render方法中的 return 的顶部。
- 在定时器中修改state状态值,当opacity<=0,再把opacity变为1
render(){
setInterval(() => {
// 获取原状态
let {opacity} = this.state
// -0.1
opacity -= 0.1
// 当小于等于0时,再把值变为 1。没有else条件省略 {}
if(opacity <= 0) opacity = 1
//设置新的透明度
this.setState({opacity})
}, 200);
return(
<div>
<h1 style={{opacity:this.state.opacity}}>React学不会怎么办?</h1>
<button onClick={this.leave}>不活了</button>
</div>
)
}
无限递归
但是现在页面刷新的有些不太正常。引发了一个无限的递归。
原因:render中的定时器每200ms执行一次,每次都会更改状态state,state改变就会触发render对页面进行渲染。
我们在render中打印 一下 “render”。发现打印次数是指数型式的增长📈 。
所以定时器放在这里不太合适。
componentDidMount
为什么componentDidMount就不用写成赋值语句加尖头函数的形式呢?
因为componentDidMount是跟render同一级别的,是React创建类的实例对象之后弄出来的。它的this指向是不会丢失的。
componentDidMount(){
}
componentDidMount在什么时候调用?在组件挂载页面之后调用
所以我们现在把定时器写到 componentDidMount 中。
// 组件挂载页面之后调用
componentDidMount(){
setInterval(() => {
// 获取原状态
let {opacity} = this.state
// -0.1
opacity -= 0.1
// 当小于等于0时,再把值变为 1
if(opacity <= 0) opacity = 1
//设置新的透明度
this.setState({opacity})
}, 200);
}
现在,实现了我们想要的结果。但是点击按钮会发现如下的报错:大体意思是组件被卸载了,没法执行状态的更新。
原因:组件已经被卸载了,计时器还在跑。所以我们需要停掉计时器。
停止定时器
那么什么时候清空定时器比较好?在点击按钮的时候。
使用clearInterval() 方法,需要定时器的id,才能清除定时器。
给setInterval 挂载到实例自身this.timer = setInterval
。
leave = ()=>{
// 清除定时器
clearInterval(this.timer)
// 卸载
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
// 组件挂载页面之后调用
componentDidMount(){
this.timer = setInterval(() => {
// 获取原状态
let {opacity} = this.state
// -0.1
opacity -= 0.1
// 当小于等于0时,再把值变为 1
if(opacity <= 0) opacity = 1
//设置新的透明度
this.setState({opacity})
}, 200);
}
componentWillUnmount
组件将要被卸载的时候调用。把定时器加到这也是可以的。
像 componentWillUnmount、componentDidMount这些
生命周期回调函数 === 生命周期钩子函数 ===生命周期函数 ===生命周期钩子