React 拾遗：类作为组件 (1)
如何使用代码
安装项目前置依赖，以及启动项目的方法，参看：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(<App />, 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)
//...
}
//...
}
- 另外，作为类属性，在constructor()定义和JSX使用时，前面都要加上
this.
(3) React 类组件的状态
React 类组件一个非常重要的内容，就是维护自己的内部状态（state）。这个状态需要放在 constructor() 中。类中的重要属性（需要保持的数据），基本都是放在状态中。
- 注意 state 必须是一个对象。
- state 中数据的读取，直接使用
this.state.<variable_name>，比如this.state.title等。
class App extends Component {
constructor(props) {
super(props);
this.state = {
title: 'title in constructor',
person: {
name: 'Jim',
age: 25,
location: 'China'
}
};
}
render() {
return (
<div>
<h1>Title - {this.state.title}</h1>
<p>The content part</p>
<ul>
<li>Name: {this.state.person.jim}</li>
<li>Age: {this.state.person.age}</li>
<li>Location: {this.state.person.location}</li>
</ul>
</div>
);
}
}
类中状态的修改
1 使用 .setState() 修改 state
首先，** 永远不要直接修改 state **。请一定使用.setState() 修改 state 。
下面实现的功能是，有一个新增加的按钮，点击以后，标题会从 'title in constructor' 更改成 'The changed title'。constructor()中、新方法、JSX中处理都有变化，后面会讲解。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
constructor(props) {
super(props);
this.changeNameHandler = this.changeNameHandler.bind(this);
this.state = {
title: 'title in constructor',
person: {
name: 'Jim',
age: 25,
location: 'China'
}
};
}
changeNameHandler() {
this.setState({ title: 'The changed title' })
}
render() {
return (
<div>
<h1>Title - {this.state.title}</h1>
<p>The content part</p>
<ul>
<li>Name: {this.state.person.jim}</li>
<li>Age: {this.state.person.age}</li>
<li>Location: {this.state.person.location}</li>
</ul>
<button onClick={this.changeNameHandler}>Change title</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
(1) 修改 state 的方法
-
类中新增加了一个方法
changeNameHandler，形式是<className>() {}。该方法只有一个功能，就是修改 state。 -
该方法调用了 React 类组件自带的方法
this.setState()方法去修改 state。 -
.setState()方法接受一个对象，这里传入的对象是{ title: 'The changed title' }。该对象会把 state 中对应的，相同键名的内容进行变更。比如，新的内容title: 'The changed title'会覆盖掉原来 state 中是title: 'title in constructor'。同时 state 中其它部分内容不会受影响，比如 person 那个键名就不会改变且依然存在。
changeNameHandler() {
this.setState({ title: 'The changed title' })
}
(2) 方法绑定 this
在 constructor() 中，使用了 .bind(this)把该方法绑定在 this 上，这是因为 ES6 中，类方法并没有绑定在 this 上。后面可以使用 babel 插件，使用可以绑定 this 的方法。如果不需要在类中其他地方调用，可以不实用 .bind(this)，比如生命周期的那些方法 componentDidMount() 等。
constructor(props) {
this.changeNameHandler = this.changeNameHandler.bind(this);
}
当然可以把绑定 this 放在 JSX 中去做，比如：
<button onClick={this.changeNameHandler.bind(this)}>Change title</button>
但是建议集中在 constructor 中管理，避免过于分散的 .bind(this) 散落在代码中。
(3) JSX 中调用方法
- button 按钮上有一个
onClick事件调用刚才设置的类方法。当点击按钮时，方法被调用。 -
onClick中间驼峰大写，区分于 DOM 操作的onclick。 - 方法的调用要用
{}括号，且使用this.。
render() {
return (
<div>
{/*... */}
<button onClick={this.changeNameHandler}>Change title</button>
</div>
);
}
