如何使用代码
安装项目前置依赖，以及启动项目的方法，参看：React 拾遗：项目脚手架。
请根据文章内容，把相应部分的代码注释取消，即可运行。
摘要
本文介绍
JavaScript 类与面向对象的参考资料
React 类中的属性与方法
React 的状态 state 读取与修改
项目代码地址：React 拾遗：类作为组件 (1)
JavaScript 类与面向对象
面向对象编程（Object-Oriented Programming, OOP）是一个古老的概念。OOP 要解决的一个问题是：
需要有一个容器，可以存放属性与方法
容器可以被继承。被继承的容器，其属性与方法都可以在新容器中继续复用
不管是 C++ 还是 Java 提到的类与实例，或者 Python 的 Metaclass，亦或是 JavaScript 的原型及其扩展，都是为了解决上述面向对象要解决的问题。
关于 JavaScript 的面向对象与原型链，可以在以下内容中找到详细叙述，本文不再赘述。
JavaScript高级程序设计（第3版）, Nicholas C.Zakas
JavaScript面向对象编程指南（第2版），Stoyan Stefanov
Object - JavaScript | MDN
Object.prototype - JavaScript | MDN
Principles of Object-Oriented JavaScript, Nicholas C.Zakas
React 中的类组件
1 最简单的 React 类组件
React 的最简单的类组件如下所示：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>
<h1>Title - main title</h1>
<p>The content part</p>
</div>
);}
}
ReactDOM.render(, document.getElementById('root'));
React 的类组件都是继承自 React.Component，其中 Component 可以单独引入
React 类组件中唯一必须的方法是 render() {}。该方法返回一段 JSX 代码。
市面上有些教程，仍然使用 createReactClass。由于 React 已经全面转向使用 ES 6，所以用 createReactClass 创建类组件已经不再推荐。建议直接继承 React.Component 来创建 React 类组件。
2 类组件的属性与状态（state）
(1) render() 方法中的变量
为了动态显示 JSX 内容，在 render() 方法中可以使用变量，如下所示：
class App extends Component {
render() {
const title = 'main title';
return (
<div>
<h1>Title - {title}</h1>
<p>The content part</p>
</div>
);}
}
但是 render() 方法中的变量，通常有两种用途：
设置内联样式
临时变量。主要根据条件，返回不同的 JSX 代码，达到根据条件判断而渲染的效果。
(2) constructor() 中的变量
如果要设置一个变量，让类中所有方法都能使用，就是放在构造器 constructor() 中。构造器中的变量，在类创建时就同时创建完成，可以在整个类中使用。
class App extends Component {
constructor() {
super()
this.title = 'title in constructor'}
render() {
return (
<div>
<h1>Title - {this.title}</h1>
<p>The content part</p>
</div>
);}
}
两个注意点：
构造器 constructor() 中，需要用一个 super() 方法，继承所有父类的属性与方法。而且，如果这个类组件要接受上层传递下来的 props 时，需要写成
class App extends Component {
constructor(props) {
super(props)
//...}
//...
}
