1. React组件

上一章我们讲了如何将虚拟DOM渲染成真实DOM并挂载，只聊了普通HTML元素的渲染。这一章我们来实现一下组件化相关的功能。组件化是React最核心的功能之一，它可以将UI切分成一些独立的、可复用的组件，这样你就只需专注于构建每一个单独的部件。通过拼装组件来形成页面和应用，就像搭积木一样。那么有没有想过，组件到底产出什么呢？它的种类有哪些呢？

我们可以联想一下平时写组件时的用法，将组件声明在JSX里，然后传入对应的属性，就可以在页面上渲染出对应的组件。通过ReactDOM.render(...)即可渲染组件，在上一章中我们知道ReactDOM.render的作用就是把虚拟DOM渲染成真实DOM，所以我们可以得出，组件的产出一定是虚拟DOM。

那么组件是如何生成虚拟DOM呢？在React里面组件的分为两种：函数组件和类组件。下面我们来说一下他们分别是如何声明和挂载的。

2. 函数式组件

2.1 函数式组件的特点

• 函数组件接收一个单一的props对象并返回了一个只有一个根节点的React元素
• 组件名称必须以大写字母开头，用于区分普通元素还是React组件
• 组件必须在使用的时候定义或引用它
• React元素不但可以是DOM标签，还可以是用户自定义的组件
• 当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为props

2.2 函数式组件的渲染过程