React Component Lifecycle

Component 的 lifecycle 如下：

  1. 建立 component
  2. 更新 component
  3. 刪除 component


建立 Component

建立 Component 的執行順序如下：

  1. constructor();
  2. componentWillMount();
  3. render();
  4. componentDidMount();

mount 的 定義 mount 的 定義


更新 Component

更新 Component 的執行順序如下：

  1. componentWillUpdate();
  2. render();
  3. componentDidUpdate();


刪除 Component

  1. componentWillUnmount();


讓我們看看 code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>My Component</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script>
            //設計組件類別
            class MyHead extends React.Component
            {
                render(){
                    return React.createElement("H" + this.props.level, null, "Hello World");
                }
            }
            class MyHeadList extends React.Component{
                constructor(props){
                    super(props);
                    this.state={maxLevel:props.start};
                }
                componentWillMount(){
                    this.intervalId=window.setInterval(()=>{
                        //this.setState({maxLevel:6});
                        this.setState((currentState, currentProps)=>{
                            if(currentState.maxLevel > currentProps.end){
                                return currentState;

                            }else{
                                return {maxLevel: currentState.maxLevel + 1};
                            }
                        });
                    }, 1000);
                }
                componentWillUnmount(){
                    window.clearInterval(intervalId);
                }
                render(){
                    let heads = [];
                    let head;
                    for(let i = 0; i<this.state.maxLevel;i++){
                        head = React.createElement(MyHead, {level:(i + 1)});
                        heads.push(head);
                    }
                    return React.createElement("div", null, heads);
                }
            }


            window.addEventListener("load", ()=>{
                //1. 建立自訂的React組件實體
                let myHeadList = React.createElement(MyHeadList, {start:2, end:5});

                //2. 將建立好的React組件實體畫到容器中
                ReactDOM.render(myHeadList, document.body);
            })
        </script>
    </head>
</html>


這次的 Sample 跟前面一樣，只是將 setIntervel 搬到 componentWillMount 中，會是比較好的流程。

同時，將 window.setInterval 用物件存起來，並於 componentWillUnmount 中用 window.clearInterval 釋放。


小結

回顧上面我們知道 React Component 中的生命週期，並使用這些特性，將前一個 Sample 的 window.setInterval 搬到 componentWillMount 中初始化，並於 componentWillUnmount 中釋放。


Refernece