本地组件状态

局部组件状态，也称为内部组件状态，允许你保存、修改和删除存储在组件中的属性。ES6 类组件使用构造函数来初始化局部组件状态。构造函数仅在组件初始化时被调用一次：

让我们引入一个类构造函数。

1class App extends Component {
2  constructor(props) {
3    super(props);
4  }
5  ...
6}

App 组件是 Component 的子类，因此在 App 组件的声明中使用了 extends Component。

必须调用 super(props);。这会在构造函数中设置 this.props，以便你可以在构造函数中访问它们。否则，在构造函数中访问 this.props 会得到 undefined。在此情况下，组件的初始状态应为示例项目列表：

1const list = [
2  {
3    title: 'React',
4    url: 'https://reactjs.org/',
5    author: 'Jordan Walke',
6    num_comments: 3,
7    points: 4,
8    objectID: 0,
9  },
10  ...
11];
12
13class App extends Component {
14  constructor(props) {
15    super(props);
16    this.state = {
17      list: list,
18    };
19  }
20  ...
21}

状态通过 this 对象绑定到类上，因此你可以访问整个组件的局部状态。例如，它可以在 render() 方法中使用。之前，你在 render() 方法中映射的是定义在组件外部的静态项目列表。现在，你将使用组件局部状态中的列表。

列表现在已成为组件的一部分，存在于局部组件状态中。你可以向列表中添加、修改或删除项目。每次更改组件状态时，组件的 render() 方法都会重新执行。这就是如何更改局部组件状态并让组件重新渲染来自局部状态的正确数据。

请注意不要直接修改状态。相反，你应该使用名为 setState() 的方法来修改状态。这些概念将在下一章中深入讲解。

### 练习： * 探索局部状态 * 在构造函数中定义更多初始状态 * 在 `render()` 方法中使用并访问状态

进一步阅读：

• 阅读关于 ES6 类构造函数 的内容