reactjs组件的生命周期
生活随笔
收集整理的這篇文章主要介紹了
reactjs组件的生命周期
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1_引出生命周期
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>1_引出生命周期</title> </head> <body><!-- 準備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//創建組件//生命周期回調函數 <=> 生命周期鉤子函數 <=> 生命周期函數 <=> 生命周期鉤子class Life extends React.Component{state = {opacity:1}death = ()=>{//卸載組件ReactDOM.unmountComponentAtNode(document.getElementById('test'))}//組件掛完畢componentDidMount(){console.log('componentDidMount');this.timer = setInterval(() => {//獲取原狀態let {opacity} = this.state//減小0.1opacity -= 0.1if(opacity <= 0) opacity = 1//設置新的透明度this.setState({opacity})}, 200);}//組件將要卸載componentWillUnmount(){//清除定時器clearInterval(this.timer)}//初始化渲染、狀態更新之后render(){console.log('render');return(<div><h2 style={{opacity:this.state.opacity}}>React學不會怎么辦？</h2><button onClick={this.death}>不活了</button></div>)}}//渲染組件ReactDOM.render(<Life/>,document.getElementById('test'))</script> </body> </html>2_react生命周期(舊)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>2_react生命周期(舊)</title> </head> <body><!-- 準備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">/* 1. 初始化階段: 由ReactDOM.render()觸發---初次渲染1. constructor()2. componentWillMount()3. render()4. componentDidMount() =====> 常用一般在這個鉤子中做一些初始化的事，例如：開啟定時器、發送網絡請求、訂閱消息2. 更新階段: 由組件內部this.setSate()或父組件render觸發1. shouldComponentUpdate()2. componentWillUpdate()3. render() =====> 必須使用的一個4. componentDidUpdate()3. 卸載組件: 由ReactDOM.unmountComponentAtNode()觸發1. componentWillUnmount() =====> 常用一般在這個鉤子中做一些收尾的事，例如：關閉定時器、取消訂閱消息*///創建組件class Count extends React.Component{//構造器constructor(props){console.log('Count---constructor');super(props)//初始化狀態this.state = {count:0}}//加1按鈕的回調add = ()=>{//獲取原狀態const {count} = this.state//更新狀態this.setState({count:count+1})}//卸載組件按鈕的回調death = ()=>{ReactDOM.unmountComponentAtNode(document.getElementById('test'))}//強制更新按鈕的回調force = ()=>{this.forceUpdate()}//組件將要掛載的鉤子componentWillMount(){console.log('Count---componentWillMount');}//組件掛載完畢的鉤子componentDidMount(){console.log('Count---componentDidMount');}//組件將要卸載的鉤子componentWillUnmount(){console.log('Count---componentWillUnmount');}//控制組件更新的“閥門”shouldComponentUpdate(){console.log('Count---shouldComponentUpdate');return true}//組件將要更新的鉤子componentWillUpdate(){console.log('Count---componentWillUpdate');}//組件更新完畢的鉤子componentDidUpdate(){console.log('Count---componentDidUpdate');}render(){console.log('Count---render');const {count} = this.statereturn(<div><h2>當前求和為：{count}</h2><button onClick={this.add}>點我+1</button><button onClick={this.death}>卸載組件</button><button onClick={this.force}>不更改任何狀態中的數據，強制更新一下</button></div>)}}//父組件Aclass A extends React.Component{//初始化狀態state = {carName:'奔馳'}changeCar = ()=>{this.setState({carName:'奧拓'})}render(){return(<div><div>我是A組件</div><button onClick={this.changeCar}>換車</button><B carName={this.state.carName}/></div>)}}//子組件Bclass B extends React.Component{//組件將要接收新的props的鉤子componentWillReceiveProps(props){console.log('B---componentWillReceiveProps',props);}//控制組件更新的“閥門”shouldComponentUpdate(){console.log('B---shouldComponentUpdate');return true}//組件將要更新的鉤子componentWillUpdate(){console.log('B---componentWillUpdate');}//組件更新完畢的鉤子componentDidUpdate(){console.log('B---componentDidUpdate');}render(){console.log('B---render');return(<div>我是B組件，接收到的車是:{this.props.carName}</div>)}}//渲染組件ReactDOM.render(<Count/>,document.getElementById('test'))</script> </body> </html>3_react生命周期(新)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>3_react生命周期(新)</title> </head> <body><!-- 準備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script><script type="text/babel">//創建組件class Count extends React.Component{/* 1. 初始化階段: 由ReactDOM.render()觸發---初次渲染1. constructor()2. getDerivedStateFromProps 3. render()4. componentDidMount() =====> 常用一般在這個鉤子中做一些初始化的事，例如：開啟定時器、發送網絡請求、訂閱消息2. 更新階段: 由組件內部this.setSate()或父組件重新render觸發1. getDerivedStateFromProps2. shouldComponentUpdate()3. render()4. getSnapshotBeforeUpdate5. componentDidUpdate()3. 卸載組件: 由ReactDOM.unmountComponentAtNode()觸發1. componentWillUnmount() =====> 常用一般在這個鉤子中做一些收尾的事，例如：關閉定時器、取消訂閱消息*///構造器constructor(props){console.log('Count---constructor');super(props)//初始化狀態this.state = {count:0}}//加1按鈕的回調add = ()=>{//獲取原狀態const {count} = this.state//更新狀態this.setState({count:count+1})}//卸載組件按鈕的回調death = ()=>{ReactDOM.unmountComponentAtNode(document.getElementById('test'))}//強制更新按鈕的回調force = ()=>{this.forceUpdate()}//若state的值在任何時候都取決于props，那么可以使用getDerivedStateFromPropsstatic getDerivedStateFromProps(props,state){console.log('getDerivedStateFromProps',props,state);return null}//在更新之前獲取快照getSnapshotBeforeUpdate(){console.log('getSnapshotBeforeUpdate');return 'atguigu'}//組件掛載完畢的鉤子componentDidMount(){console.log('Count---componentDidMount');}//組件將要卸載的鉤子componentWillUnmount(){console.log('Count---componentWillUnmount');}//控制組件更新的“閥門”shouldComponentUpdate(){console.log('Count---shouldComponentUpdate');return true}//組件更新完畢的鉤子componentDidUpdate(preProps,preState,snapshotValue){console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);}render(){console.log('Count---render');const {count} = this.statereturn(<div><h2>當前求和為：{count}</h2><button onClick={this.add}>點我+1</button><button onClick={this.death}>卸載組件</button><button onClick={this.force}>不更改任何狀態中的數據，強制更新一下</button></div>)}}//渲染組件ReactDOM.render(<Count count={199}/>,document.getElementById('test'))</script> </body> </html>4_getSnapShotBeforeUpdate的使用場景
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate的使用場景</title><style>.list{width: 200px;height: 150px;background-color: skyblue;overflow: auto;}.news{height: 30px;}</style> </head> <body><!-- 準備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script><script type="text/babel">class NewsList extends React.Component{state = {newsArr:[]}componentDidMount(){setInterval(() => {//獲取原狀態const {newsArr} = this.state//模擬一條新聞const news = '新聞'+ (newsArr.length+1)//更新狀態this.setState({newsArr:[news,...newsArr]})}, 1000);}getSnapshotBeforeUpdate(){return this.refs.list.scrollHeight}componentDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - height}render(){return(<div className="list" ref="list">{this.state.newsArr.map((n,index)=>{return <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM.render(<NewsList/>,document.getElementById('test'))</script> </body> </html> 與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的reactjs组件的生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： reactjs DOM的Diffing算
- 下一篇： reactjs高阶函数和函数柯里化