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:
ReactDOM.render(<Example text="Hello world" />, document.getElementById('app'));

完整的生命週期架構#

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

有父子層元件的情況下#

假設有父層元件...

Last updated on