React中state屬性和生命周期的使用
一、React組件的state屬性和生命周期
當(dāng)組件與用戶交互時(shí),數(shù)據(jù)會(huì)發(fā)生變化，就要用到組件內(nèi)的state屬性；當(dāng)state值發(fā)生改變時(shí) react會(huì)重新渲染(刷新)組件，從而保證UI界面和數(shù)據(jù)的一致
1、state的定義
this.state = {
屬性名：值
}2、更新狀態(tài)(state)
不能直接給狀態(tài)機(jī)中的屬性賦值，必須通過該方法來更新狀態(tài)機(jī)中的屬性值
this.setState({
屬性名：新的屬性值
})3、組件的生命周期
（1）掛載(mount)
當(dāng)組件創(chuàng)建成功,并插入到DOM中。在掛載階段依次執(zhí)行的方法如下：
①constructor() -- 構(gòu)造方法重寫的前提
在 React 組件掛載之前，會(huì)調(diào)用它的構(gòu)造函數(shù)。在為 React.Component 子類實(shí)現(xiàn)構(gòu)造函數(shù)時(shí)，應(yīng)該在其他語句之前調(diào)用 super(props)。
否則，this.props 在構(gòu)造函數(shù)中可能會(huì)出現(xiàn)未定義的 bug
構(gòu)造函數(shù)的兩種方法：
- Ⅰ初始化對(duì)象的內(nèi)部狀態(tài)：this.state = { }
- Ⅱ?yàn)槭录壎硞€(gè)實(shí)例時(shí)
在 constructor() 函數(shù)中不要調(diào)用 setState() 方法。如果你的組件需要使用內(nèi)部 state，請(qǐng)直接在構(gòu)造函數(shù)中為 this.state 賦值初始化state
②static getDerivedStateFromProps() -- 獲取組件的狀態(tài)值
③render() -- 渲染,是類組件中必須要實(shí)現(xiàn)的方法,該方法被調(diào)用時(shí)會(huì)檢查this.props和this.state的變化，是一個(gè)純函數(shù):
- Ⅰ在state不變的情況下,每次調(diào)用的返回結(jié)果都是一樣的
- Ⅱ在React.Component類的子類中會(huì)重新定義(實(shí)現(xiàn))
- Ⅲ不會(huì)直接和瀏覽器進(jìn)行交互
④componentDidMount() -- 掛載。組件插入到DOM樹之后立即調(diào)用
- Ⅰ和瀏覽器進(jìn)行交互
- Ⅱ可以改變狀態(tài)值：調(diào)用setState方法
- Ⅲ依賴于 DOM 節(jié)點(diǎn)的初始化應(yīng)該放在這里
（2）案例（隱藏或顯示實(shí)時(shí)更新的計(jì)時(shí)器）
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.定義類組件
class Clock extends React.Component{
constructor(props){
super(props)
//定義狀態(tài)機(jī)并初始化
this.state = {
date: new Date(),
show: true,
text: '隱藏'
}
//進(jìn)行事件綁定：當(dāng)某個(gè)事件被觸發(fā)時(shí),調(diào)用誰的事件處理函數(shù)
this.handleClickShow = this.handleClickShow.bind(this); //將事件處理函數(shù)綁定到this
// 事件處理函數(shù) 后一個(gè)this代表當(dāng)前這個(gè)示例
}
componentDidMount(){ //掛載完成后立即執(zhí)行的函數(shù):即頁面打開時(shí)就可以看到組件
this.timerID = setInterval( //this指的是當(dāng)前這個(gè)對(duì)象，timeId就是個(gè)變量
()=> this.tick(), //setInterval是每間隔多久執(zhí)行一次
1000 //沒間隔1秒鐘，執(zhí)行一次tick這個(gè)函數(shù)
//根據(jù)狀態(tài)的變化，自動(dòng)去調(diào)用這個(gè)函數(shù)
)
}
componentWillUnmount(){ //組件卸載后關(guān)閉定時(shí)器
clearInterval(this.timerID)
}
tick(){ //自定義方法：改變狀態(tài)機(jī)(改變狀態(tài)機(jī)中的屬性值)
this.setState({//不能直接給狀態(tài)機(jī)中的屬性賦值,必須通過該方法來更新狀態(tài)機(jī)中的屬性值
date: new Date()
})
}
handleClickShow(){ //當(dāng)這個(gè)函數(shù)被調(diào)用，要改變show的和text兩個(gè)屬性
this.setState(state=>({ //參數(shù)state表示以前的狀態(tài) //這里的state指的是狀態(tài)機(jī)，將原來state的狀態(tài)值取出來，作為參數(shù)傳給setState
show: !state.show, //取反state.show
text: !state.show?'隱藏':'顯示' //取反為真，放隱藏，取反為假，放顯示
}))
}
render(){ //渲染函數(shù)
let isShow = this.state.show
let element;
if (isShow) {
element = <h2>{this.state.date.toLocaleTimeString()}</h2>
}else{
element = null
}
return (
<div>
<button onClick={ this.handleClickShow }>{this.state.text}計(jì)時(shí)器</button>//花括號(hào)里面的內(nèi)容會(huì)被直接執(zhí)行
<br />
{ element }
</div>
)
}
}
//2.渲染
ReactDOM.render(<Clock />,root)
</script>
</body>注意：代碼后面的注釋需要認(rèn)真閱讀，對(duì)每一個(gè)方法的解釋
（3）更新(update)
當(dāng)組件的props或state發(fā)生改變時(shí)，就會(huì)觸發(fā)更新操作。在更新階段調(diào)用的函數(shù)如下：
- ①
static getDerivedStateFromProps() - ②
shouldComponentUpdate() - ③
render()-- 重新渲染 - ④
getSnapshotBeforeUpdate() - ⑤
componentDidUpdate()-- 組件更新后立即調(diào)用
Ⅰ、componentDidUpdate(prevProps, prevState, snapshot)：會(huì)在更新后會(huì)被立即調(diào)用。
首次渲染不會(huì)執(zhí)行此方法。當(dāng)組件更新后，可以在此處對(duì) DOM 進(jìn)行操作。
如果你對(duì)更新前后的 props 進(jìn)行了比較，也可以選擇在此處進(jìn)行網(wǎng)絡(luò)請(qǐng)求。
也可以在 componentDidUpdate() 中直接調(diào)用 setState()，但請(qǐng)注意它必須被包裹在一個(gè)條件語句里，正如上述的例子那樣進(jìn)行處理，否則會(huì)導(dǎo)致死循環(huán)。它還會(huì)導(dǎo)致額外的重新渲染，雖然用戶不可見，但會(huì)影響組件性能。
（4）卸載(unmount)
當(dāng)組件從DOM中移除時(shí)。卸載時(shí)調(diào)用的函數(shù)是
componentWillUnmount()：會(huì)在組件卸載及銷毀之前直接調(diào)用。在此方法中執(zhí)行必要的清理操作，例如，清除timer，取消網(wǎng)絡(luò)請(qǐng)求或清除在 componentDidMount() 中創(chuàng)建的訂閱等。
componentWillUnmount() 中不應(yīng)調(diào)用 setState()，因?yàn)樵摻M件將永遠(yuǎn)不會(huì)重新渲染。組件實(shí)例卸載后，將永遠(yuǎn)不會(huì)再掛載它。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于React-Dropzone開發(fā)上傳組件功能(實(shí)例演示)
這篇文章主要介紹了基于React-Dropzone開發(fā)上傳組件,主要講述的是在React-Flask框架上開發(fā)上傳組件的技巧，需要的朋友可以參考下2021-08-08
webpack構(gòu)建react多頁面應(yīng)用詳解
這篇文章主要介紹了webpack構(gòu)建react多頁面應(yīng)用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了react使用echart繪制地圖,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了react-router6.x路由配置及導(dǎo)航,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
React組件的創(chuàng)建與state同步異步詳解
這篇文章主要介紹了react組件實(shí)例屬性state,有狀態(tài)state的組件稱作復(fù)雜組件,沒有狀態(tài)的組件稱為簡(jiǎn)單組件，狀態(tài)里存儲(chǔ)數(shù)據(jù),數(shù)據(jù)的改變驅(qū)動(dòng)頁面的展示，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-03-03
React模仿網(wǎng)易云音樂實(shí)現(xiàn)一個(gè)音樂項(xiàng)目詳解流程
這篇文章主要介紹了React模仿網(wǎng)易云音樂實(shí)現(xiàn)一個(gè)音樂項(xiàng)目的詳細(xì)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
React-Hook中使用useEffect清除定時(shí)器的實(shí)現(xiàn)方法
這篇文章主要介紹了React-Hook中useEffect詳解(使用useEffect清除定時(shí)器),主要介紹了useEffect的功能以及使用方法，還有如何使用他清除定時(shí)器，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了對(duì)react中間件的理解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
React錯(cuò)誤邊界Error Boundaries詳解
錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹2022-12-12
React?Native?中處理?Android?手機(jī)吞字的解決方案
這篇文章主要介紹了React?Native?中處理?Android?手機(jī)吞字的解決方案,作者在 React Native 0.67.4 環(huán)境下，編寫了一個(gè)小 demo 來復(fù)現(xiàn)這個(gè)問題，需要的朋友可以參考下2022-08-08