03-函数式组件&类式组件

一、函数式组件

用函数定义的组件（适用于【简单组件】的定义）

<div id = "test"></div>
<script type="text/babel">
 //1、创建函数式组件
 function Demo(){
  console.log(this)   //此处的this是undefined，因为babel编译后开启了严格模式
  return <h2>我是函数式定义的组件【简单组件】</h2>
 }
 //2、渲染组件到页面
 ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

执行了 ReactDOM.render(<MyComponent/>。。。。。之后，发生了什么？
   1、React解析组件标签，找到了MyComponent组件
   2、 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真是DOM，随后呈现在页面中

二、类式组件

1、类的基本知识

总结： 
1、类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
2、如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
2、类中所定义的方法，都是放在了类的原型对象上，供实例去使用。

二、类定义的组件

<div id = "test"></div>
<script type="text/babel">
 //1、创建类式组件
 class MyComponent extends React.Component {
   render(){
      //render是放哪里的？- MyComponent的原型对象上,提供实例使用
      //render中的this是谁？- MyComponent的实例对象 / Mycomponent组件实例对象
      return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
   }
 }
 //2、渲染组件到页面
 ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>

执行了 ReactDOM.render(<MyComponent/>。。。。。之后，发生了什么？
   1、React解析组件标签，找到了MyComponent组件
   2、 发现组件是使用类定义的，随后new 出来该类的实例，并通过该实例调用到原型上的render方法
   3、将render返回的虚拟DOM转为真是DOM，随后呈现在页面中

三、【简单组件】和【复杂组件】

有状态的就是复杂组件  --> state