函式元件

//1.建立函式式元件
        function MyComponent(){
            console.log(this); //此處的this是undefined，因為babel編譯後開啟了嚴格模式
            return <h2>我是用函式定義的元件(適用於【簡單元件】的定義)</h2>
        }
//2.渲染元件到頁面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
            /* 
            執行了ReactDOM.render(<MyComponent/>.......之後，發生了什麼？
                    1.React解析元件標籤，找到了MyComponent元件。
                    2.發現元件是使用函式定義的，隨後呼叫該函式，將返回的虛擬DOM轉為真實DOM，隨後呈現在頁面中。
        
 
*/

類元件

//1.建立類式元件
        class MyComponent extends React.Component {
            render() {
                //render是放在哪裡的？—— MyComponent的原型物件上，供例項使用。
                //render中的this是誰？—— MyComponent的例項物件 <=> MyComponent元件例項物件。
                console.log('render中的this:',this);
                return
 
 <h2>我是用類定義的元件(適用於【複雜元件】的定義)</h2>
            }
        }
        ReactDOM.render(<MyComponent/>,document.getElementById('test'));
/* 
            執行了ReactDOM.render(<MyComponent/>.......之後，發生了什麼？
                    1.React解析元件標籤，找到了MyComponent元件。
                    2.發現元件是使用類定義的，隨後new出來該類的例項，並通過該例項呼叫到原型上的render方法。
                    3.將render返回的虛擬DOM轉為真實DOM，隨後呈現在頁面中。
        
 
*/

區別

　　 1.函式式元件一般用於比較簡單的元件定義，類元件用於複雜的元件定義

　　 2.函式元件中的this是undefined，類元件中的this指向的是當前元件的例項物件

3. 函式元件是一個純函式，它接收一個props物件返回一個react元素；而類元件需要去繼承React.Component並且建立render函式返回react元素。

4. 函式元件沒有生命週期和狀態state，而類元件有。

5. 你不能在函式元件中使用生命週期鉤子，原因和不能使用state一樣，所有的生命週期鉤子都來自於繼承的React.Component中。

　　 6.函式元件ReactDOM.render的過程：

        執行了ReactDOM.render(<MyComponent/>.......之後，發生了什麼？
                1.React解析元件標籤，找到了MyComponent元件。
                2.發現元件是使用函式定義的，隨後呼叫該函式，將返回的虛擬DOM轉為真實DOM，隨後呈現在                   頁面中。

　　 類元件中ReactDOM.render的過程：

      執行了ReactDOM.render(<MyComponent/>.......之後，發生了什麼？
         1.React解析元件標籤，找到MyComponent元件。
         2.發現元件是使用類定義的，隨後new出來該類的例項，並通過該例項呼叫到原型上的render方法。
         3.將render返回的虛擬DOM轉為真實的DOM，隨後呈現在頁面中