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