React 初探 [五] React 组件的生命周期
說(shuō)起生命周期，最先接觸的是Andorid 開(kāi)發(fā)中 Activity 和 Fragment 的生命周期，再者是Vue 組件，那么今天要梳理的是React 組件的生命周期，可見(jiàn)對(duì)生命周期的理解和掌握對(duì)組件化開(kāi)發(fā)時(shí)非常重要的。
概述
生命周期是什么？生命周期就是指一個(gè)對(duì)象的生老病死，而此處的對(duì)象就是React 組件，組件的生命周期也就是從其創(chuàng)建到銷(xiāo)毀的過(guò)程，而且在整個(gè)過(guò)程中，React 組件暴露出來(lái)了一些函數(shù)，在特定的階段進(jìn)行回調(diào)，我們稱(chēng)之為生命周期回調(diào)函數(shù)或者鉤子函數(shù)，這些回調(diào)函數(shù)主要是給開(kāi)發(fā)暴露了操作的入口，在某個(gè)特定的階段可以做一些需要的操作。
主要鉤子函數(shù)
- ?constructor()
- componentWillMount()
- ?render()
- ?componentDidMount()
- ?componentWillUpdate()
- componentWillUnmount()
主要執(zhí)行過(guò)程
? ? ?1、第一次初始化渲染顯示：ReactDOM.render()
- ? ? ? ? ? ?constructor() 創(chuàng)建對(duì)象 初始化 state
- ? ? ? ? ? ?componentWillMount() :將要插入的回調(diào)
- ? ? ? ? ? ?render(): 用于插入虛擬DOM 回調(diào)
- ? ? ? ? ? ?componentDidMount() 已經(jīng)插入回調(diào)
? ? ?2、每次更新state ：this.setState()
- ? ? ? ? ? ?componentWillUpdate():將要更新回調(diào)
- ? ? ? ? ? ?render() : 更新 重新渲染
? ? ?3、移除組件：ReactDOM.unmountComponentAtNode(containerDom)
- ? ? ? ? ? ?componentWillUnmount() 組件將要被移除回調(diào)
小案例練習(xí)
需求：
gif圖我還不會(huì)弄，所以效果 把代碼貼出來(lái)需要的自己跑起來(lái)看效果吧
code:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>組件生命周期</title> </head><body><div id="example"></div><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script><script type="text/babel">/* 需求 ：自定義組件 1、讓指定的文本做顯示/隱藏的動(dòng)畫(huà)2、切換時(shí)間為2s3、點(diǎn)擊按鈕從界面中移除組件界面*/class Life extends React.Component{constructor(props){super(props)console.log('===constructor===')//初始化化狀態(tài)this.state ={opacity:1}this.distoryComponent = this.distoryComponent.bind(this)}distoryComponent(){// 組件銷(xiāo)毀也要把定時(shí)器銷(xiāo)毀ReactDOM.unmountComponentAtNode(document.getElementById('example'))}render(){console.log('===render====')const {opacity} = this.statereturn (<div><h2 style={{opacity}}>{this.props.msg}</h2><button onClick={this.distoryComponent}>不活了</button></div>)}componentWillMount(){console.log("===componentWillMount===")}componentDidMount(){console.log("===componentDidMount===")// 啟動(dòng)循環(huán)定時(shí)器this.intervalId = setInterval(() => {let {opacity} = this.stateopacity-=0.1if(opacity<=0){opacity=1}this.setState({opacity})}, 200);}componentWillUpdate(){console.log("===componentWillUpdate===")}componentWillUnmount(){console.log('===componentWillUnmount===')clearInterval(this.intervalId)}}ReactDOM.render(<Life msg="react 太難了"/>,document.getElementById('example'))</script> </body></html>總結(jié)及注意：
?
總結(jié)
以上是生活随笔為你收集整理的React 初探 [五] React 组件的生命周期的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 阿里云服务器1核1G1M能放多少个网站
- 下一篇： 江苏扬州|2021年起，高支模须用盘扣式