組件的生命周期
- 簡單說：一個組件從開始到最后消亡所經(jīng)歷的各種狀態(tài)揭芍，就是一個組件的生命周期
組件生命周期函數(shù)的定義：從組件被創(chuàng)建，到組件掛載到頁面上運行，再到頁面關(guān)閉組件被卸載，這三個階段總是伴隨著組件各種各樣的事件包蓝，那么這些事件驶社，統(tǒng)稱為組件的生命周期函數(shù)！
- 通過這個函數(shù)测萎，能夠讓開發(fā)人員的代碼亡电，參與到組件的生命周期中。也就是說硅瞧，通過鉤子函數(shù)份乒，就可以控制組件的行為
- react component
- React Native 中組件的生命周期
- React 生命周期的管理藝術(shù)
- 智能組件和木偶組件
組件生命周期函數(shù)總覽
- 組件的生命周期包含三個階段：創(chuàng)建階段（Mounting）、運行和交互階段（Updating）腕唧、卸載階段（Unmounting）
- Mounting：
constructor()
componentWillMount()
render()
componentDidMount()
- Updating
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
- Unmounting
componentWillUnmount()
組件生命周期 - 創(chuàng)建階段(Mounting)
- 特點：該階段的函數(shù)只執(zhí)行一次
constructor()
- 作用：1 獲取props 2 初始化state
- 說明：通過
constructor()的參數(shù)props獲取 - 設(shè)置state和props
class Greeting extends React.Component {
constructor(props) {
// 獲取 props
super(props)
// 初始化 state
this.state = {
count: props.initCount
}
}
}
// 初始化 props
// 語法：通過靜態(tài)屬性 defaultProps 來初始化props
Greeting.defaultProps = {
initCount: 0
};
componentWillMount()
- 說明：組件被掛載到頁面之前調(diào)用或辖，其在render()之前被調(diào)用，因此在這方法里
同步地設(shè)置狀態(tài)將不會觸發(fā)重渲染 - 注意：無法獲取頁面中的DOM對象
- 注意：可以調(diào)用
setState()方法來改變狀態(tài)值 - 用途：發(fā)送ajax請求獲取數(shù)據(jù)
componentWillMount() {
console.warn(document.getElementById('btn')) // null
this.setState({
count: this.state.count + 1
})
}
render()
作用：渲染組件到頁面中枣接，無法獲取頁面中的DOM對象
-
注意：不要在render方法中調(diào)用
setState()方法颂暇，否則會遞歸渲染- 原因說明：狀態(tài)改變會重新調(diào)用
render()，render()又重新改變狀態(tài)
- 原因說明：狀態(tài)改變會重新調(diào)用
render() {
console.warn(document.getElementById('btn')) // null
return (
<div>
<button id="btn" onClick={this.handleAdd}>打豆豆一次</button>
{
this.state.count === 4
? null
: <CounterChild initCount={this.state.count}></CounterChild>
}
</div>
)
}
componentDidMount()
- 1 組件已經(jīng)掛載到頁面中
- 2 可以進行DOM操作但惶，比如：獲取到組件內(nèi)部的DOM對象
- 3 可以發(fā)送請求獲取數(shù)據(jù)
- 4 可以通過
setState()修改狀態(tài)的值 - 注意：在這里修改狀態(tài)會重新渲染
componentDidMount() {
// 此時耳鸯，就可以獲取到組件內(nèi)部的DOM對象
console.warn('componentDidMount', document.getElementById('btn'))
}
組件生命周期 - 運行階段（Updating）
- 特點：該階段的函數(shù)執(zhí)行多次
- 說明：每當組件的
props或者state改變的時候，都會觸發(fā)運行階段的函數(shù)
componentWillReceiveProps()
- 說明：組件接受到新的
props前觸發(fā)這個方法 - 參數(shù)：當前組件
props值 - 可以通過
this.props獲取到上一次的值 - 使用：若你需要響應(yīng)屬性的改變膀曾，可以通過對比
this.props和nextProps并在該方法中使用this.setState()處理狀態(tài)改變 - 注意：修改
state不會觸發(fā)該方法
componentWillReceiveProps(nextProps) {
console.warn('componentWillReceiveProps', nextProps)
}
shouldComponentUpdate()
- 作用：根據(jù)這個方法的返回值決定是否重新渲染組件县爬，返回
true重新渲染，否則不渲染 - 優(yōu)勢：通過某個條件渲染組件妓肢，降低組件渲染頻率捌省，提升組件性能
- 說明：如果返回值為
false苫纤，那么碉钠，后續(xù)render()方法不會被調(diào)用 - 注意：這個方法必須返回布爾值！＞砭小喊废！
- 場景：根據(jù)隨機數(shù)決定是否渲染組件
// - 參數(shù)：
// - 第一個參數(shù)：最新屬性對象
// - 第二個參數(shù)：最新狀態(tài)對象
shouldComponentUpdate(nextProps, nextState) {
console.warn('shouldComponentUpdate', nextProps, nextState)
return nextState.count % 2 === 0
}
componentWillUpdate()
- 作用：組件將要更新
- 參數(shù)：最新的屬性和狀態(tài)對象
- 注意：不能修改狀態(tài) 否則會循環(huán)渲染
componentWillUpdate(nextProps, nextState) {
console.warn('componentWillUpdate', nextProps, nextState)
}
render() 渲染
- 作用：重新渲染組件，與
Mounting階段的render是同一個函數(shù) - 注意：這個函數(shù)能夠執(zhí)行多次栗弟，只要組件的屬性或狀態(tài)改變了污筷，這個方法就會重新執(zhí)行
componentDidUpdate()
- 作用：組件已經(jīng)被更新
- 參數(shù)：舊的屬性和狀態(tài)對象
componentDidUpdate(prevProps, prevState) {
console.warn('componentDidUpdate', prevProps, prevState)
}
組件生命周期 - 卸載階段（Unmounting）
- 組件銷毀階段：組件卸載期間，函數(shù)比較單一乍赫，只有一個函數(shù)瓣蛀，這個函數(shù)也有一個顯著的特點：組件一輩子只能執(zhí)行依次！
- 使用說明：只要組件不再被渲染到頁面中雷厂，那么這個方法就會被調(diào)用（ 渲染到頁面中 -> 不再渲染到頁面中 ）
componentWillUnmount()
-
作用：在卸載組件的時候惋增，執(zhí)行清理工作，比如
- 1 清除定時器
- 2 清除
componentDidMount創(chuàng)建的DOM對象
本文引自部分* React入門看這篇就夠了
