react类组件与函数组件

1.类组件：

1.类组件必须继承React.Component

2.必须有render 函数

3.render 中必须有return

先写好组件，再将组件设置为虚拟dom加入到容器test中，以显示组件中的内容。

代码如下：

 <div id="test"></div>
    <script type="text/babel">
        class MyComponent extends React.Component{
            render(){
                console.log(this);
                return <h2>类组件</h2>
            }
        }
        const vDom = <MyComponent/> //将组件设置为虚拟dom
        ReactDOM.render(vDom,document.getElementById("test"))
        /*
        1.react解析组件标签，判断组件类型，是类组件自动帮我们new一个类组件实例
        2。调用类组件中的render函数
        3.将render中返回的虚拟dom渲染到真实dom中
        */
    </script>

2.函数组件

顾名思义，那就是把函数当成组件设置为虚拟dom然后放在容器test里呗~

要注意，在函数组件中的this指向并不是向普通函数一样指向window，因为react开启了Babel严格模式，严格模式最大特点就是禁止this指向window；所以this指向undefined~

代码如下：

<div id="test"></div>
    <script type="text/babel" >
        function MyComponent(){
            console.log(this);//undefined
            return(
                <div>函数组件</div>
            )
        }
        const vDom = <MyComponent/>
        ReactDOM.render(vDom,document.getElementById("test"))
    </script>

欢迎友友们一起交流哦~