React.js 16从入门到实战最新章节_王金柱著

3.3　React类组件

本节接着介绍如何通过ES6 Class（类）形式实现一个React类组件。下面看一个具体的代码实例：

【代码3-4】（详见源代码目录ch03-react-comp-class.html文件）

关于【代码3-4】的说明：

第18~22行代码定义了一个ES6 Class类（HelloReactComp），这个类就是我们要实现的React类组件，具体说明如下：
- ►　第18行代码通过class关键字定义了类名（HelloReactComp），并通过extends关键字声明该类继承自React.Component对象。
- ►　第19~21行代码通过React.Component对象的render()方法实现React类组件的渲染操作，具体渲染内容是第20行代码返回的JSX代码。
第24行代码中，通过const关键字定义了一个常量（eleHello），然后将ES6 Class类（HelloReactComp）的类名（HelloReactComp）使用尖括号“<>”包括起来，赋值给常量（eleHello），类似于将类名（HelloReactComp）作为标签名来使用。通过以上步骤的定义，ES6 Class类（HelloReactComp()）就成为React类组件（<HelloReactComp>）。
第29行代码中，通过将常量（eleHello）放入JSX代码（{eleHello}）来实现React类组件的应用。

测试网页的效果如图3.2所示。

图3.2 React类组件

如图3.2中的箭头所示，页面中显示了通过React类组件渲染的效果，从效果来看与React函数组件功能相同。

另外注意一点，React组件的名称首字母必须是大写的。例如，<HelloReactComp>是正确的，而<helloReactComp>就是非法的。这个规定主要是为了与原生HTML标签名称相区别，因为原生HTML标签名称均是小写字母开头的。