1.引入react的生命周期函数
实现一个需求：页面每2秒慢慢消失，消失后恢复继续
注意事项：
1.这里使用了两个生命周期函数。
2.绑定函数要用this.方法名的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 根节点 -->
<div id="root"></div>
<!-- 导入 -->
<script src="./lib/react.js"></script>
<script src="./lib/react-dom.js"></script>
<script src="./lib/babel.js"></script>
<!-- script代码 -->
<script type="text/babel">
// 获取渲染节点
const root=ReactDOM.createRoot(document.querySelector('#root'))
// 定义组件
class App extends React.Component{
state={
opacity:1
}
death=()=>{
// 卸载组件
root.unmount()
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
// 组件挂载完毕
componentDidMount(){
this.timer= setInterval(() => {
let {opacity}=this.state
opacity-=0.1
console.log('定时器')
if(opacity<=0)opacity=1
this.setState({opacity})//不能直接修改state中的数据，要通过setState的方式
}, 200);
}
// 组件将要卸载
componentWillUnmount(){
clearInterval(this.timer)
}
// 初始化渲染、状态更新之后
render(){
return(
<div>
<h2 style={{opacity:this.state.opacity}}>react学不会怎么办?</h2>
<button onClick={this.death}>不活了</button>
</div>
)
}
}
// render函数渲染组件
root.render(<App/>)
</script>
</body>
</html>2.react生命周期旧组件
更新流程：shoulfComponentUptate()是是否更新的阀门，默认返回一个true.
3.生命周期的三个阶段（旧）
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
- constructor()
- componentWillMount()
- render()
- componentDidMount() ----------常用
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate() ----常用
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount()----常用
4.react的生命周期（新）
废弃了三个willreceiveProps,willupdate,willmount,新增了两个生命周期钩子函数
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » react的生命周期
发表评论 取消回复