目錄
React 組件生命週期方法 (Lifecycle Methods) – 2025 最新教學
React 組件的生命週期(Lifecycle)代表了組件在應用程式中從建立到消亡的過程。了解這些生命週期方法對於開發高效能的 React 應用程式至關重要。本文將介紹每個階段的關鍵方法並提供實作範例,幫助您掌握 React 的生命週期管理。
1. 初始化階段
在初始化階段,React 組件會執行以下方法:
constructor()
:在組件被建立時執行,負責初始化組件的狀態(state)和綁定方法(bind)。getDerivedStateFromProps()
:當接收到新的 props 時執行,根據新的 props 更新組件的狀態(state)。render()
:在組件被更新時執行,根據 props 和 state 產生要顯示的元素。componentDidMount()
:在組件被掛載(mounted)後執行,適合進行非同步操作,如 API 請求。
實作範例
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { data: null };
}
componentDidMount() {
fetch('/api/data')
.then(response => response.json())
.then(data => this.setState({ data }));
}
render() {
return {this.state.data};
}
}
2. 更新階段
在更新階段,React 組件會執行以下方法:
getDerivedStateFromProps()
:接收到新的 props 時執行,更新組件的狀態。shouldComponentUpdate()
:在接收到新的 props 或 state 時執行,返回布林值決定是否繼續更新。render()
:根據 props 和 state 更新顯示的元素。getSnapshotBeforeUpdate()
:在更新前執行,返回一個物件,傳入componentDidUpdate()
。componentDidUpdate()
:更新後執行,適合進行非同步操作。
實作範例
componentDidUpdate(prevProps) {
if (this.props.value !== prevProps.value) {
this.fetchData();
}
}
3. 消滅階段
在消滅階段,React 組件會執行以下方法:
componentWillUnmount()
:在組件被消滅前執行,適合進行清理工作,例如取消訂閱或清除計時器。
實作範例
componentWillUnmount() {
clearInterval(this.timerID);
}
總結
了解 React 的生命週期方法,使您能夠在組件的不同階段執行特定操作,從而實現高效的 React 應用程式開發。掌握這些方法不僅能提高開發效率,還能增強應用的性能。
常見問題解答 (Q&A)
1. 什麼是 React 的生命週期方法?
React 的生命週期方法是指組件在不同階段(初始化、更新、消滅)中可用來執行特定行為的函數。
2. 為什麼要使用 shouldComponentUpdate()
?
這個方法可以讓您控制組件是否需要更新,從而提升應用的性能。
3. 如何清理非同步請求?
在 componentWillUnmount()
中進行清理操作,確保不再進行任何非同步請求,以避免記憶體洩漏。
如需更多深入學習,您可以參考以下資源:
Getting Started with React
React Component
The Component Lifecycle
React Lifecycle Methods: How and When to Use Them
Understanding React Component Lifecycle Methods
延伸閱讀更多 React 相關文章,請見 這裡。
推薦學習 YouTube 影片:
—