react新版本生命周期鉤子函數(shù)及用法詳解
更新時間：2021年04月28日 10:10:56 作者：河軟小寶
這篇文章主要介紹了react新版本生命周期鉤子函數(shù)及用法詳解,本文通過示例圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
和舊的生命周期相比
準(zhǔn)備廢棄三個鉤子，已經(jīng)新增了兩個鉤子
React16 之后有三個生命周期被廢棄(但并沒有刪除)
- componentWillMount（ 組件將要掛載的鉤子）
- componentWillReceiveProps（組件將要接收一個新的參數(shù)時的鉤子）
- componentWillUpdate（組件將要更新的鉤子）
新版本的生命周期新增的鉤子
- getDerivedStateFromProps
- 通過參數(shù)可以獲取新的屬性和狀態(tài)
- 該函數(shù)是靜態(tài)的
- 該函數(shù)的返回值會覆蓋掉組件狀態(tài)
getSnapshotBeforeUpdate
- 真實的DOM構(gòu)建完成，但還未實際渲染到頁面中。
- 在該函數(shù)中，通常用于實現(xiàn)一些附加的dom操作
- 該函數(shù)的返回值，會作為componentDidUpdate的第三個參數(shù)
getDerivedStateFromProps
getDerivedStateFromProps不是給實例用的，需要將它定義為一個靜態(tài)方法。且需要給一個返回值
返回值可以使 state Obj 也可以是null
返回值是 state Obj 的話直接將之前的覆蓋 且無法改變
返回null 對其他任何功能都沒有影響
// 從props哪里得到一個派生的狀態(tài)
static getDerivedStateFromProps(props,state){
return props
}
若 state的值 在人和時候都取決與 props 時，可以使用getDerivedStateFromProps
<div id="test"></div>
<!-- 引入react核心庫 -->
<script src="../js/17.0.1/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/17.0.1/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx 轉(zhuǎn)換為 js -->
<script src="../js/17.0.1/babel.min.js"></script>
<script type='text/babel'>
// 創(chuàng)建組件
class Count extends React.Component{
// 構(gòu)造器
constructor(props){
console.log('Count---constructor')
super(props)
// 初始化狀態(tài)
this.state = {count:0}
}
// 掛載完成的鉤子
componentDidMount(){
console.log('Count---componentDidMount')
}
// 卸載組件按鈕的回調(diào)
death=()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
// 實現(xiàn) +1
add =()=>{
// 獲取原狀態(tài)
const {count} = this.state
// 更新狀態(tài)
this.setState({count:count+1})
}
// 強制更新按鈕的回調(diào)
force=()=>{
this.forceUpdate()
}
static getDerivedStateFromProps(props,state){
console.log('getDerivedStateFromProps',props,state)
return props
}
// 控制組件更新的閥門
shouldComponentUpdate(){
console.log('Count---shouldComponentUpdate')
// 如果返回值為false閥門關(guān)閉 默認(rèn)為true
return true
}
// 組件更新完畢的鉤子
componentDidUpdate(){
console.log('Count---componentDidUpdate')
}
// 組件將要卸載的鉤子
componentWillUnmount(){
console.log('Count---componentWillUnmount');
}
render(){
console.log('Count---render')
const {count} = this.state
return(
<div>
<h2>當(dāng)前求和為:{count}</h2>
<button onClick={this.add}>點我+1</button>
<button onClick={this.death}>點我卸載組件</button>
<button onClick={this.force}>點我強制更新（不改變數(shù)據(jù)）</button>
</div>
)
}
}
// 渲染組件
ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
</script>
執(zhí)行結(jié)果
getSnapshotBeforeUpdate
返回值可以是null 或者 一個快照
如果是null 則沒有任何影響
如果是一個快照則可以將返回值傳遞給componentDidUpdate 的第三個參數(shù)
componentDidUpdate 能接收的三個參數(shù)
分別是
先前的props、先前的state和getSnapshotBeforeUpdate返回的快照
prevprops、 prevstate、snapshotValue
<div id="test"></div>
<!-- 引入react核心庫 -->
<script src="../js/17.0.1/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/17.0.1/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx 轉(zhuǎn)換為 js -->
<script src="../js/17.0.1/babel.min.js"></script>
<script type='text/babel'>
// 創(chuàng)建組件
class Count extends React.Component{
// 構(gòu)造器
constructor(props){
console.log('Count---constructor')
super(props)
// 初始化狀態(tài)
this.state = {count:0}
}
// 掛載完成的鉤子
componentDidMount(){
console.log('Count---componentDidMount')
}
// 卸載組件按鈕的回調(diào)
death=()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
// 實現(xiàn) +1
add =()=>{
// 獲取原狀態(tài)
const {count} = this.state
// 更新狀態(tài)
this.setState({count:count+1})
}
// 強制更新按鈕的回調(diào)
force=()=>{
this.forceUpdate()
}
static getDerivedStateFromProps(props,state){
console.log('getDerivedStateFromProps',props,state)
return null
}
getSnapshotBeforeUpdate(){
console.log('getSnapshotBeforeUpdate');
return "eee"
}
// 控制組件更新的閥門
shouldComponentUpdate(){
console.log('Count---shouldComponentUpdate')
// 如果返回值為false閥門關(guān)閉 默認(rèn)為true
return true
}
// 組件更新完畢的鉤子
componentDidUpdate(preProps,preState,snapshotValue){
console.log('Count---1componentDidUpdate',preProps,preState,snapshotValue);
}
// 組件將要卸載的鉤子
componentWillUnmount(){
console.log('Count---componentWillUnmount');
}
render(){
console.log('Count---render')
const {count} = this.state
return(
<div>
<h2>當(dāng)前求和為:{count}</h2>
<button onClick={this.add}>點我+1</button>
<button onClick={this.death}>點我卸載組件</button>
<button onClick={this.force}>點我強制更新（不改變數(shù)據(jù)）</button>
</div>
)
}
}
// 渲染組件
ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
</script>
總結(jié)
生命周期的三個階段（新）
一、 初始化階段: 由ReactDOM.render()觸發(fā)—初次渲染
constructor()getDerivedStateFromPropsrender()componentDidMount()
二、 更新階段: 由組件內(nèi)部this.setSate()或父組件重新render觸發(fā)
getDerivedStateFromPropsshouldComponentUpdate()render()getSnapshotBeforeUpdatecomponentDidUpdate()
三、卸載組件: 由ReactDOM.unmountComponentAtNode()觸發(fā)
componentWillUnmount()
重要的勾子
render：初始化渲染或更新渲染調(diào)用componentDidMount：開啟監(jiān)聽, 發(fā)送ajax請求componentWillUnmount：做一些收尾工作, 如: 清理定時器
即將廢棄的勾子
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
現(xiàn)在使用會出現(xiàn)警告，下一個大版本需要加上UNSAFE_前綴才能使用，以后可能會被徹底廢棄，不建議使用。
到此這篇關(guān)于react新版本生命周期鉤子函數(shù)的文章就介紹到這了,更多相關(guān)react 生命周期 鉤子函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天介紹下React手寫tab切換問題，代碼部分包括父文件，子文件及子文件tab樣式，本文通過實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-11-11
在現(xiàn)代前端開發(fā)中,組件化是 React 的核心理念之一,組件之間的通信是構(gòu)建復(fù)雜應(yīng)用的重要組成部分,在這篇文章中,我們將深入探討 React 組件通信的多種方式,包括它們的優(yōu)缺點、使用場景以及最佳實踐,需要的朋友可以參考下2024-11-11
react antd-design Select全選功能實例
這篇文章主要介紹了react antd-design Select全選功能實例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了react組件傳值的四種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了react實現(xiàn)消息顯示器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
React Native之ListView實現(xiàn)九宮格效果的示例
本篇文章主要介紹了React Native之ListView實現(xiàn)九宮格效果的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
詳解在React.js中使用PureComponent的重要性和使用方式
這篇文章主要介紹了詳解在React.js中使用PureComponent的重要性和使用方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
基于Webpack5 Module Federation的業(yè)務(wù)解耦實踐示例
這篇文章主要為大家介紹了基于Webpack5 Module Federation的業(yè)務(wù)解耦實踐示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
本篇文章主要介紹了React Native自定義控件底部抽屜菜單的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
React??memo允許你的組件在?props?沒有改變的情況下跳過重新渲染的問題記錄
使用?memo?將組件包裝起來,以獲得該組件的一個?記憶化?版本,只要該組件的?props?沒有改變,這個記憶化版本就不會在其父組件重新渲染時重新渲染,這篇文章主要介紹了React??memo允許你的組件在?props?沒有改變的情況下跳過重新渲染,需要的朋友可以參考下2024-06-06