Skip to main content

[react] 生命週期(life cycle)

建議使用的生命週期架構如下:

👍 React LifeCycle Methods Diagram

Mounting LifeCycle

  • componentWillMount
  • render
  • componentDidMount

在 React 中,適合在 componentDidMount 時來透過 AJAX 存取資料,或者說,在 componentDidMount 時,最適合 React app 和其他外部的應用程式產生連結,不論是 Web APIs、其他 JS 套件、或者 setTimeout, setInterval

export class Flashy extends React.Component {
componentWillMount() {
alert('AND NOW, FOR THE FIRST TIME EVER... FLASHY!!!!');
}

componentDidMount() {
alert('YOU JUST WITNESSED THE DEBUT OF... FLASHY!!!!!!!');
}

render() {
alert('Flashy is rendering!');

return <h1 style={{ color: this.props.color }}>OOH LA LA LOOK AT ME I AM THE FLASHIEST</h1>;
}
}

Updating/Unmounting Lifecycle

  • componentWillReceiveProps(nextProps):第一次元件轉譯時不會呼叫到,當元件更新時,在 render 開始前呼叫。
  • shouldComponentUpdate(nextProps, nextState)
  • componentWillUpdate(nextProps, nextState)
  • render
  • componentDidUpdate(prevProps, prevState)
  • componentWillUnmount

shouldComponentUpdate(nextProps, nextState)

當元件更新時,在 componentWillReceiveProps 之後,在 render 之前呼叫到。在這裡面可以回傳 truefalse當回傳 false 時,該元件就不會繼續更新

componentWillUpdate(nextProps, nextState)

shouldComponentUpdaterender 之間被呼叫到。適合用在和 React 無關的設定,像是檢查 window 的尺寸。

componentDidUpdate(prevProps, prevState)

在任何轉譯的 HTML 完成載入後。通常會用在和 React 環境外的東西互動時使用,像是瀏覽器或 Web APIs,這和 componentWillUpdate 很類似,差別只在於 render 之後呼叫。

export class Example extends React.Component {
// 可以代入參數,取得即將進來的 props
componentWillReceiveProps(nextProps) {
// do something here ...
}

render() {
return <h1>{this.props.text}</h1>;
}
}

// The first render won't trigger
// componentWillReceiveProps:
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<Example text="Hello world" />);

完整的生命週期架構

下圖是 React 中,完整的生命週期架構,但建議使用官方建議的就好:

有父子層元件的情況下

假設有父層元件...