React 組件的生命周期是指組件在它的整個生命週期中，會經歷哪些狀態，以及在每個狀態中會做什麼事情。React 組件的生命周期可以分為三個階段：初始化、更新和消滅。

初始化

初始化是 React 組件的第一個階段，在這個階段，React 組件會做以下事情：

  • 初始化組件的狀態（state）
  • 將 props 傳入組件
  • 將組件渲染到 DOM 中

在初始化階段，React 組件會調用以下兩個方法：

  • constructor()：在組件被渲染之前，會調用 constructor() 方法，在這個方法中，可以初始化組件的狀態（state），以及將 props 傳入組件。
constructor(props) {
    super(props);
    this.state = {
        name: 'John Doe'
    };
}
  • render()：在 constructor() 方法執行完之後，會調用 render() 方法，在這個方法中，可以將組件渲染到 DOM 中。
render() {
    return (
        <div>
            <h1>Hello, {this.state.name}</h1>
        </div>
    );
}

更新

更新是 React 組件的第二個階段，在這個階段，React 組件會做以下事情：

  • 更新組件的狀態（state）
  • 更新組件的 props
  • 更新組件的 DOM

在更新階段，React 組件會調用以下兩個方法：

  • componentWillReceiveProps()：當組件接收到新的 props 時，會調用 componentWillReceiveProps() 方法，在這個方法中，可以更新組件的 props。
componentWillReceiveProps(nextProps) {
    this.setState({
        name: nextProps.name
    });
}
  • shouldComponentUpdate()：當組件的 props 或 state 被更新時，會調用 shouldComponentUpdate() 方法，在這個方法中，可以決定組件是否應該更新 DOM。
shouldComponentUpdate(nextProps, nextState) {
    if (this.state.name !== nextState.name) {
        return true;
    }
    return false;
}

消滅

消滅是 React 組件的第三個階段，在這個階段，React 組件會做以下事情：

  • 清除組件的 DOM
  • 清除組件的事件監聽器
  • 清除組件的定時器

在消滅階段，React 組件會調用以下方法：

  • componentWillUnmount()：當組件被從 DOM 中移除時，會調用 componentWillUnmount() 方法，在這個方法中，可以清除組件的事件監聽器和定時器。
componentWillUnmount() {
    clearInterval(this.timer);
    document.removeEventListener('click', this.handleClick);
}

React 組件的生命周期是 React 組件的核心概念，它可以讓開發者更好地控制組件的行為，並且更好地管理組件的資源。

Categorized in:

ReactReact.js

Tagged in:

,