React —— 01 函数式组件与类式组件

React —— 01 函数式组件与类式组件

一 . 函数式组件 ：
1》格式 ：

（1）函数中return的就是 要创建的组件的内容，图中为最简单的组件定义
（2） 注意此处this输出的是 undefined 因为 babel 编译后开启了严格模式【禁止自己定义的函数中
this指向window】
（3）渲染组件到页面是固定写法 ReactDOM.render(<组件名字/>，要渲染到的容器)

2》执行了ReactDOM . render（…）语句后，发生了什么 ？
（1）React 结息组件标签，找到了 Demo 组件
（2）发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实的DOM，随后呈现在页面中

二 . 类式组件

1》格式 ：

（1）像Js里面创建类一样，要用class，其中Mycomponent为自定义的组件名。
（2）要继承React.Component
（3）要有render（）【必须写】
（4）和函数组件一样，return的也是要创建的组件内容
补 ： render（）是类里面的一个方法，所以render（）是放在MyComponent的原型对象上，供实例使用。 所以 render（）的调用需要new一个实例对象，虽然没有代码显示new的过程，但还是new了。

2》执行了ReactDOM . render…语句后，发生了什么 ？
（1）React 结息组件标签，找到了 Demo 组件
（2）发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上render（）方法
（3）将render（）返回的虚拟DOM转为真实DOM，随后呈现在页面中

3》render（）中的 this 是谁 ？
Mycomponent的组件实例对象