前言
學(xué)習(xí)React，生命周期很重要，我們了解完生命周期的各個(gè)組件，對寫高性能組件會(huì)有很大的幫助.
一、簡介
React?/ri??kt/?組件的生命周期指的是組件從創(chuàng)建到銷毀過程中所經(jīng)歷的一系列方法調(diào)用。這些方法可以讓我們在不同的時(shí)刻執(zhí)行特定的代碼，以滿足組件的需求。
React 的生命周期可以分為三個(gè)階段：掛載階段、更新階段和卸載階段。每個(gè)階段都有對應(yīng)的生命周期方法，如下所示：
二、生命周期三個(gè)階段
掛載階段
-
constructor() ：/k?n?str?kt?(r)/?構(gòu)造函數(shù)，最先被執(zhí)行,我們通常在構(gòu)造函數(shù)里初始化
state對象或者給自定義方法綁定this -
static getDerivedStateFromProps() ：
static getDerivedStateFromProps(nextProps, prevState)，這是個(gè)靜態(tài)方法,當(dāng)我們接收到新的屬性想去修改state，可以使用getDerivedStateFromProps -
render() ：?/?rend?(r)/?
render函數(shù)是純函數(shù)，只返回需要渲染的東西，不應(yīng)該包含其它的業(yè)務(wù)邏輯,可以返回原生的DOM、React組件、Fragment、Portals、字符串和數(shù)字、Boolean和null等內(nèi)容 -
componentDidMount()：組件裝載之后調(diào)用，此時(shí)可以獲取到DOM節(jié)點(diǎn)并操作，比如對canvas，svg的操作，服務(wù)器請求，訂閱都可以寫在這個(gè)里面，但是記得在
componentWillUnmount中取消訂閱。componentWillUnmount中取消訂閱。
1、在?componentWillUnmount?生命周期方法中，我們可以執(zhí)行一些清理工作，比如取消訂閱或者清除定時(shí)器等。
取消訂閱是指在組件卸載之前，將之前添加的事件監(jiān)聽或者數(shù)據(jù)訂閱取消掉，以避免內(nèi)存泄漏和無效的數(shù)據(jù)處理。
具體實(shí)現(xiàn)方法取決于你所使用的訂閱方式。如果你使用的是 React Context API 或者 Redux 等狀態(tài)管理庫，則可以在?componentWillUnmount?方法中取消訂閱。例如，使用 React Context API 訂閱狀態(tài)更新的代碼可能如下所示：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: props.initialValue,
};
this.unsubscribe = props.subscribe(this.handleValueChange);
}
componentWillUnmount() {
this.unsubscribe();
}
handleValueChange = (newValue) => {
this.setState({ value: newValue });
};
render() {
return (
<div>
<span>Current value: {this.state.value}</span>
</div>
);
}
}
在上面的代碼中，unsubscribe?方法是一個(gè)用于取消訂閱的函數(shù)，它在組件創(chuàng)建時(shí)通過?props.subscribe?方法添加訂閱，然后在組件卸載時(shí)通過?componentWillUnmount?方法進(jìn)行取消訂閱。
2、如果你使用的是普通的 DOM 事件監(jiān)聽器或者 WebSocket 等瀏覽器原生 API，那么你需要在組件卸載時(shí)手動(dòng)移除事件監(jiān)聽或者關(guān)閉 WebSocket 連接等。
例如，使用?addEventListener?添加事件監(jiān)聽器的代碼可能如下所示：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
document.addEventListener('click', this.handleClick);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClick);
}
handleClick(event) {
console.log('Clicked!', event.target);
}
render() {
return <div>Click anywhere to log the target element.</div>;
}
}
在上面的代碼中，我們在組件掛載時(shí)通過?addEventListener?方法添加了一個(gè)?click?事件監(jiān)聽器，然后在組件卸載時(shí)通過?removeEventListener?方法移除該監(jiān)聽器。這樣可以確保在組件卸載時(shí)不會(huì)再接收到無效的事件通知。
更新階段
- static getDerivedStateFromProps() /?st?t?k/?/d??ra?vd/?/ste?t/?/pr?ps/ 此方法在更新個(gè)掛載階段都可能會(huì)調(diào)用
- shouldComponentUpdate()?
shouldComponentUpdate(nextProps, nextState)，有兩個(gè)參數(shù)nextProps和nextState，表示新的屬性和變化之后的state，返回一個(gè)布爾值，true表示會(huì)觸發(fā)重新渲染，false表示不會(huì)觸發(fā)重新渲染，默認(rèn)返回true,我們通常利用此生命周期來優(yōu)化React程序性能 - render()??更新階段也會(huì)觸發(fā)此生命周期
- getSnapshotBeforeUpdate()?
getSnapshotBeforeUpdate(prevProps, prevState)，這個(gè)方法在render之后，componentDidUpdate之前調(diào)用，有兩個(gè)參數(shù)prevProps和prevState，表示之前的屬性和之前的state，這個(gè)函數(shù)有一個(gè)返回值，會(huì)作為第三個(gè)參數(shù)傳給componentDidUpdate，如果你不想要返回值，可以返回null，此生命周期必須與componentDidUpdate搭配使用 - componentDidUpdate()?
componentDidUpdate(prevProps, prevState, snapshot)，該方法在getSnapshotBeforeUpdate方法之后被調(diào)用，有三個(gè)參數(shù)prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。第三個(gè)參數(shù)是getSnapshotBeforeUpdate返回的,如果觸發(fā)某些回調(diào)函數(shù)時(shí)需要用到 DOM 元素的狀態(tài)，則將對比或計(jì)算的過程遷移至getSnapshotBeforeUpdate，然后在?componentDidUpdate中統(tǒng)一觸發(fā)回調(diào)或更新狀態(tài)。
卸載階段
- componentWillUnmount()?當(dāng)組件被卸載或者銷毀了就會(huì)調(diào)用，我們可以在這個(gè)函數(shù)里去清除一些定時(shí)器，取消網(wǎng)絡(luò)請求，清理無效的DOM元素等垃圾清理工作
這些生命周期方法按照順序依次被調(diào)用。在掛載階段，組件被創(chuàng)建并插入到 DOM 樹中。在更新階段，組件的 props 或者 state 發(fā)生改變時(shí)會(huì)觸發(fā)更新，從而重新渲染組件。最后，在卸載階段，組件被從 DOM 樹中移除并銷毀。
每個(gè)生命周期方法都有不同的作用，可以用來實(shí)現(xiàn)各種需求，比如在組件掛載時(shí)進(jìn)行初始化工作、在組件更新時(shí)進(jìn)行數(shù)據(jù)處理或者在組件卸載時(shí)進(jìn)行清理工作等。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-415575.html
?
?文章來源：http://www.zghlxwxcb.cn/news/detail-415575.html
?
?
?
?
到了這里，關(guān)于10分鐘理解React生命周期的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
