React中的“函数式组件”和“类式组件”

一、函数式组件：

适用于【简单组件】的定义（简单组件指无状态组件 ）

执行ReactDOM.render()后：

1. React解析组件标签，找到了MyComponent组件。
2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

二、类式组件:

适用于【复杂组件】的定义（复杂组件指有状态组件 ）

class MyComponent extends React.Component {
  //render 放在 MyComponent的原型对象上，供实例使用
  render() {
    //this指向MyComponent组件实例对象
    console.log(this)
    return (
      
我是类式组件
    )
  }
}
ReactDOM.render(,document.getElementById('app'))

执行ReactDOM.render()后：

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