react中函數式組件和類式組件的區別

函數組件

//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，隨后呈現在頁面中