React中state屬性和生命周期的使用
一、React組件的state屬性和生命周期
當(dāng)組件與用戶交互時,數(shù)據(jù)會發(fā)生變化，就要用到組件內(nèi)的state屬性；當(dāng)state值發(fā)生改變時 react會重新渲染(刷新)組件，從而保證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 組件掛載之前，會調(diào)用它的構(gòu)造函數(shù)。在為 React.Component 子類實現(xiàn)構(gòu)造函數(shù)時，應(yīng)該在其他語句之前調(diào)用 super(props)。
否則，this.props 在構(gòu)造函數(shù)中可能會出現(xiàn)未定義的 bug
構(gòu)造函數(shù)的兩種方法：
- Ⅰ初始化對象的內(nèi)部狀態(tài)：this.state = { }
- Ⅱ為事件綁定某個實例時
在 constructor() 函數(shù)中不要調(diào)用 setState() 方法。如果你的組件需要使用內(nèi)部 state，請直接在構(gòu)造函數(shù)中為 this.state 賦值初始化state
②static getDerivedStateFromProps() -- 獲取組件的狀態(tài)值
③render() -- 渲染,是類組件中必須要實現(xiàn)的方法,該方法被調(diào)用時會檢查this.props和this.state的變化，是一個純函數(shù):
- Ⅰ在state不變的情況下,每次調(diào)用的返回結(jié)果都是一樣的
- Ⅱ在React.Component類的子類中會重新定義(實現(xiàn))
- Ⅲ不會直接和瀏覽器進(jìn)行交互
④componentDidMount() -- 掛載。組件插入到DOM樹之后立即調(diào)用
- Ⅰ和瀏覽器進(jìn)行交互
- Ⅱ可以改變狀態(tài)值：調(diào)用setState方法
- Ⅲ依賴于 DOM 節(jié)點的初始化應(yīng)該放在這里
（2）案例（隱藏或顯示實時更新的計時器）
<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)某個事件被觸發(fā)時,調(diào)用誰的事件處理函數(shù)
this.handleClickShow = this.handleClickShow.bind(this); //將事件處理函數(shù)綁定到this
// 事件處理函數(shù) 后一個this代表當(dāng)前這個示例
}
componentDidMount(){ //掛載完成后立即執(zhí)行的函數(shù):即頁面打開時就可以看到組件
this.timerID = setInterval( //this指的是當(dāng)前這個對象，timeId就是個變量
()=> this.tick(), //setInterval是每間隔多久執(zhí)行一次
1000 //沒間隔1秒鐘，執(zhí)行一次tick這個函數(shù)
//根據(jù)狀態(tài)的變化，自動去調(diào)用這個函數(shù)
)
}
componentWillUnmount(){ //組件卸載后關(guān)閉定時器
clearInterval(this.timerID)
}
tick(){ //自定義方法：改變狀態(tài)機(jī)(改變狀態(tài)機(jī)中的屬性值)
this.setState({//不能直接給狀態(tài)機(jī)中的屬性賦值,必須通過該方法來更新狀態(tài)機(jī)中的屬性值
date: new Date()
})
}
handleClickShow(){ //當(dāng)這個函數(shù)被調(diào)用，要改變show的和text兩個屬性
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}計時器</button>//花括號里面的內(nèi)容會被直接執(zhí)行
<br />
{ element }
</div>
)
}
}
//2.渲染
ReactDOM.render(<Clock />,root)
</script>
</body>注意：代碼后面的注釋需要認(rèn)真閱讀，對每一個方法的解釋
（3）更新(update)
當(dāng)組件的props或state發(fā)生改變時，就會觸發(fā)更新操作。在更新階段調(diào)用的函數(shù)如下：
- ①
static getDerivedStateFromProps() - ②
shouldComponentUpdate() - ③
render()-- 重新渲染 - ④
getSnapshotBeforeUpdate() - ⑤
componentDidUpdate()-- 組件更新后立即調(diào)用
Ⅰ、componentDidUpdate(prevProps, prevState, snapshot)：會在更新后會被立即調(diào)用。
首次渲染不會執(zhí)行此方法。當(dāng)組件更新后，可以在此處對 DOM 進(jìn)行操作。
如果你對更新前后的 props 進(jìn)行了比較，也可以選擇在此處進(jìn)行網(wǎng)絡(luò)請求。
也可以在 componentDidUpdate() 中直接調(diào)用 setState()，但請注意它必須被包裹在一個條件語句里，正如上述的例子那樣進(jìn)行處理，否則會導(dǎo)致死循環(huán)。它還會導(dǎo)致額外的重新渲染，雖然用戶不可見，但會影響組件性能。
（4）卸載(unmount)
當(dāng)組件從DOM中移除時。卸載時調(diào)用的函數(shù)是
componentWillUnmount()：會在組件卸載及銷毀之前直接調(diào)用。在此方法中執(zhí)行必要的清理操作，例如，清除timer，取消網(wǎng)絡(luò)請求或清除在 componentDidMount() 中創(chuàng)建的訂閱等。
componentWillUnmount() 中不應(yīng)調(diào)用 setState()，因為該組件將永遠(yuǎn)不會重新渲染。組件實例卸載后，將永遠(yuǎn)不會再掛載它。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用React18和WebSocket構(gòu)建實時通信功能詳解
WebSocket是一種在Web應(yīng)用中實現(xiàn)雙向通信的協(xié)議,它允許服務(wù)器主動向客戶端推送數(shù)據(jù),而不需要客戶端發(fā)起請求,本文將探索如何在React?18應(yīng)用中使用WebSocket來實現(xiàn)實時通信,感興趣的可以了解下2024-01-01
React 全自動數(shù)據(jù)表格組件——BodeGrid的實現(xiàn)思路
表格是在后臺管理系統(tǒng)中用的最頻繁的組件之一，相關(guān)的功能有數(shù)據(jù)的新增和編輯、查詢、排序、分頁、自定義顯示以及一些操作按鈕。這篇文章主要介紹了React 全自動數(shù)據(jù)表格組件——BodeGrid ,需要的朋友可以參考下2019-06-06
使用ReactJS實現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
這篇文章主要介紹了使用ReactJS實現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果的相關(guān)資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2016-10-10
這篇文章主要給大家介紹了關(guān)于在React.js中使用collections時key的重要性，注意：一定不能不能忘了key，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
這篇文章主要為大家介紹了React錯誤用法習(xí)慣分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了React如何動態(tài)控制偽元素樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了React組件渲染后對DOM的操作方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
react事件綁定時。this并不會指向當(dāng)前DOM元素。往往使用bind來改變this指向，今天通過本文給大家介紹React事件綁定的方式，感興趣的朋友2021-07-07
react中實現(xiàn)將一個視頻流為m3u8格式的轉(zhuǎn)換
這篇文章主要介紹了react中實現(xiàn)將一個視頻流為m3u8格式的轉(zhuǎn)換方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React高階組件使用小結(jié)，一起看看吧2023-01-01