【第27期】一文了解React生命周期
概述
React生命周期是指在組件的不同階段，React會自動調用的一系列方法。它們可以用于控制組件的行為、處理副作用、更新狀態(tài)等。
React生命周期
在React中，組件的生命周期可以分為三個階段：掛載（Mounting）、更新（Updating）和卸載（Unmounting）。每個階段都對應著不同的生命周期方法。
掛載階段（Mounting）
-
constructor：組件被創(chuàng)建時調用，用于初始化狀態(tài)和綁定方法。 -
static getDerivedStateFromProps：在組件實例化和更新時調用，用于根據props的變化來更新狀態(tài)。 -
render：根據props和state渲染組件的內容。 -
componentDidMount：組件掛載后調用，可以進行異步操作、訂閱事件等。
以下是React中掛載的一些案例：
掛載階段（Mounting）：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() {
console.log('Component mounted');
}
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
在上述例子中，組件首次掛載時，會打印出"Component mounted"。點擊按鈕時，會更新組件的狀態(tài)，重新渲染。
更新階段（Updating）
-
static getDerivedStateFromProps：在組件更新時調用，用于根據props的變化來更新狀態(tài)。 -
shouldComponentUpdate：決定組件是否需要重新渲染，默認返回true。 -
render：根據props和state渲染組件的內容。 -
getSnapshotBeforeUpdate：在組件更新前獲取DOM的快照，返回值將作為第三個參數傳遞給componentDidUpdate。 -
componentDidUpdate：組件更新后調用，可以進行DOM操作、網絡請求等。
以下是React中更新的一些案例：
更新階段（Updating）：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidUpdate() {
console.log('Component updated');
}
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
在上述例子中，每次更新組件時，都會打印出"Component updated"。
卸載階段（Unmounting）：
-
componentWillUnmount：組件卸載前調用，可以進行清理操作，如取消訂閱、清除定時器等。
除了上述的生命周期方法，React還提供了一些特殊的方法，如錯誤處理相關的方法：
-
static getDerivedStateFromError：在子組件發(fā)生錯誤時調用，用于更新錯誤狀態(tài)。 -
componentDidCatch：在子組件發(fā)生錯誤后調用，可以記錄錯誤信息、發(fā)送錯誤報告等。
需要注意的是，React 16.3版本以后，一些生命周期方法被標記為過時（deprecated），不再推薦使用。而且，React Hooks的引入也改變了組件的生命周期概念，可以使用useEffect等Hooks來替代生命周期方法的功能。以下是React中卸載的一些案例：
卸載階段（Unmounting）：
class App extends React.Component {
componentDidMount() {
this.timer = setInterval(() => {
console.log('Timer tick');
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
console.log('Component unmounted');
}
render() {
return <h1>Hello, World!</h1>;
}
}
ReactDOM.render(<App />, document.getElementById('root'));
setTimeout(() => {
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
}, 5000);
在上述例子中，組件掛載后，會每秒打印一次"Timer tick"。5秒后，組件被卸載，會打印出"Component unmounted"，同時定時器也被清除。
React與Vue生命周期對比
React和Vue是兩個非常流行的JavaScript框架，它們都提供了生命周期方法來管理組件的行為。下面是React和Vue生命周期的對比：
React生命周期方法：
-
掛載階段：constructor、static getDerivedStateFromProps、render、componentDidMount -
更新階段：static getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate、componentDidUpdate -
卸載階段：componentWillUnmount
Vue生命周期方法：
-
創(chuàng)建階段：beforeCreate、created、beforeMount、mounted -
更新階段：beforeUpdate、updated -
銷毀階段：beforeDestroy、destroyed
React和Vue生命周期方法的名稱和執(zhí)行順序有一些差異，但它們的作用和用途是類似的。
-
React的生命周期方法更加細分和靈活，可以通過shouldComponentUpdate方法來控制組件的重新渲染，而且React Hooks的引入也提供了更靈活的方式來處理組件的狀態(tài)和副作用。
-
Vue的生命周期方法在創(chuàng)建、更新和銷毀階段都有對應的方法，使得開發(fā)者可以更方便地處理組件的行為。Vue還提供了beforeCreate和created方法來進行組件的初始化操作，而React的constructor方法則用于初始化組件的狀態(tài)和綁定方法。
總的來說，React和Vue的生命周期方法在概念和功能上是相似的，但具體的方法名稱和執(zhí)行順序有所差異。開發(fā)者可以根據自己的需求選擇適合的框架和生命周期方法來管理組件的行為。