函数式组件

如其名，就是通过写函数来构成组件，react将页面分成一个又一个的组件，然后再把其组合起来形成一个完整的页面。
最简单的一个例子

const FunCom = () => {
  return <h1>我是函数式组件</h1>;
};
ReactDOM.render(<FunCom />, document.getElementById('app'));

这里需要注意的地方是：

如前文学习的时候我们说过的那样，如果当标签的首字母大写的时候，react解析的时候才会认为是自定义的组件，小写的话就会去找html中的标签。
注意再render中写的是标签的形式，并且是闭合标签。随后把文件引入html中，结果如下

类组件

以类的方式来完成组件

class ClassComponent extends React.Component {
  render() {
    return <h1>我是类组件</h1>
  }
}
ReactDOM.render(<ClassComponent />, document.getElementById('app'));

这里需要注意的是：

类组件要继承React.Component
类组件的jsx写在render()内部同时这里的render和React.render()那个不一样，这个render是定义在类的原型上的render方法，而这个类的构造方法肯定是继承的Component的，所以这个完整的过程是什么？
首先react解析到这个标签是个自定义的类组件，那么就会去new一个类的实例，并且通过该实例调用了其原型上的render方法，随后将这个方法返回的虚拟dom转为真实的dom呈现在页面上。
结果如下：

react的函数式组件与类组件初学习

函数式组件

类组件