02.函数组件与类组件介绍

前面编写的初始化渲染过程还很弱小，需要通过引入组件机制来进行增强。

在正式介绍组件之前，我们先了解一个概念：Elements

Elements

React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of “components”. An element describes what you want to see on the screen. React elements are immutable. const element = <h1>Hello, world</h1>; Typically, elements are not used directly, but get returned from components.

这里面关键信息有两个：

• element 用于描述你在屏幕上看见的什么，是不可变的
• 一般不直接使用，而是通过组件返回

这里说，element一般通过组件返回，那组件究竟是什么呢？相较于elements作为一个静态页面展示块，组件更像是是一个独立的有机的系统，我们来一起看一看官方文档是怎么对组件进行描述的。

Components

根据文档的的描述我们可以获得三个方面的信息：

• 组件的定义是：React组件是小的可重用的代码块，这些代码块返回能够渲染到页面的elements
• 组件的表现形式有两种：
  • 返回element的普通函数就是组件，我们称之为函数组件
  • 一个具有render函数的类，是组件的另一种形式，我们称之为类组件
• 组件特点
  • 规范：组件名首字母必须大写
  • 组合方式：组件中可以包含别的组件

通过对上面信息的汇总，我们可以得知，React其实就是一个组件的世界，除了极特殊的情况，就像上一章我们实现初始化渲染过程的时候那样，手动使用element来展示一个静态的页面效果，我们进行日常开发的时候就是一个开发各种组件的过程。