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，随后呈现在页面中