深入了解 React 組件生命週期函數：2025 最新語法與最佳實踐

作者:

了解React組件生命週期函數的功能

目錄

深入了解 React 組件生命週期函數：2025 最新語法與最佳實踐

在 React 程式開發中，組件生命週期函數是一個核心概念，能夠幫助開發者高效地管理組件的行為。本文將介紹 React 組件生命週期函數的基本概念，2025 年最新的語法，並提供實作範例及最佳實踐。

組件生命週期函數可以分為三大類：初始化函數、更新函數和清理函數。這些函數在組件的不同生命週期階段被自動調用，讓開發者能夠執行相應的操作。

初始化函數

初始化函數在 React 組件被創建時調用，主要用於設置組件的初始狀態和屬性。以下是常見的初始化函數：

  • constructor(props)：在組件創建時調用，通常用於初始化狀態和綁定事件處理函數。
    class MyComponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = { count: 0 };
            this.handleIncrement = this.handleIncrement.bind(this);
        }
        
        handleIncrement() {
            this.setState({ count: this.state.count + 1 });
        }
    }
  • getDerivedStateFromProps(nextProps, prevState)：根據新 props 更新狀態。
    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.value !== prevState.value) {
            return { value: nextProps.value };
        }
        return null;
    }
  • componentDidMount()：組件掛載後執行，常用於請求數據。
    componentDidMount() {
        fetch('/api/data')
            .then(response => response.json())
            .then(data => this.setState({ data }));
    }

更新函數

更新函數在組件更新時調用，主要用於更新狀態和屬性。常見的更新函數包括：

  • shouldComponentUpdate(nextProps, nextState)：決定組件是否需要重新渲染。
    shouldComponentUpdate(nextProps, nextState) {
        return nextProps.value !== this.props.value;
    }
  • getSnapshotBeforeUpdate(prevProps, prevState)：在更新前擷取狀態。
    getSnapshotBeforeUpdate(prevProps, prevState) {
        return this.state.scrollPosition;
    }
  • componentDidUpdate(prevProps, prevState, snapshot)：更新後執行，適合進行 DOM 操作。
    componentDidUpdate(prevProps, prevState) {
        if (this.state.scrollPosition !== prevState.scrollPosition) {
            this.scrollTo(this.state.scrollPosition);
        }
    }

清理函數

清理函數在組件卸載時被調用，用於釋放資源和清理狀態。常見的清理函數有：

  • componentWillUnmount()：組件卸載時調用，適合清理定時器或取消訂閱。
    componentWillUnmount() {
        clearInterval(this.timer);
    }

透過這些生命週期函數，開發者可以更好地控制 React 組件的行為，並有效管理其狀態和屬性。隨著 React 的不斷更新，了解這些函數的最新實踐對於開發者來說至關重要。

Q&A（常見問題解答）

1. React 組件生命週期函數是什麼？

React 組件生命週期函數是一組被自動調用的函數，允許開發者在組件的不同生命週期階段執行特定操作，如初始化、更新和清理。

2. 如何選擇使用哪些生命週期函數？

根據組件的需求選擇合適的生命週期函數。例如，若需要在組件創建時進行數據請求，則應使用 componentDidMount() 函數。

3. 在 React 中，生命週期函數有何變化？

隨著 React 的更新，某些舊的生命週期函數（如 componentWillMount 和 componentWillUpdate）已被淘汰，建議使用新的函數來代替，確保代碼的兼容性和最佳性能。

—

發佈留言