这是一个带有注释代码的演示，可为您提供更多信息：http : //codepen.io/PiotrBerebecki/pen/rrGWjm

1. 第 3 行中的 state 是什么？看起来像一个全局变量，如果它前面有 var 或 const 就有意义。那是生命周期函数/变量吗？

state第 3 行只是 Counter 组件的一个属性。另一种使用 ES6 语法在 React 中初始化状态的方法如下：

constructor() {
  super();
  this.state = {
    value: 0
  }
}

react文档：https : //facebook.github.io/react/docs/reusable-components.html#es6-classes

[React ES6 class] API 与 React.createClass 类似，但 getInitialState 除外。不是提供单独的 getInitialState 方法，而是在构造函数中设置自己的状态属性。

2. 我必须从 react 中导入组件吗？我记得我不需要在 v15 中这样做。

您也可以通过以下方式导入 React 并定义一个类：

import React from 'react';

class Counter extends React.Component {
...

下面还允许您使用组件 API：

import React, { Component } from 'react';

class Counter extends Component {
... 

3. prevState 来自哪里？

prevState 来自 setState api：https ://facebook.github.io/react/docs/component-api.html#setstate

也可以传递带有签名 function(state, props) 的函数。在某些情况下，当您希望在设置任何值之前将查询 state+props 的先前值的原子更新入队时，这可能很有用。例如，假设我们想增加 state 中的一个值：

this.setState(function(previousState, currentProps) {
  return {
     value: previousState.value + 1
  };
});

您经常会看到开发人员通过以下方式更新状态。这不如上述方法可靠，因为状态可能会异步更新，我们不应该依赖其值来计算下一个状态。

 this.setState({
   value: this.state.value + 1 // prone to bugs
 });

来自我的代码笔的完整代码：

class Counter extends React.Component {

  // state = { value: 0 };

  // you can also initialise state in React
  // in the constructor:
  constructor() {
    super();
    this.state = {
      value: 0
    }
  }

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    })); 
  }

  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));  
  }

  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}


ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

您的代码中有一些与 ES6 (ES2015) 版本相关的功能，因此您可能会感到困惑：

第 3 行中的 state 是什么？看起来像一个全局变量，如果它前面有 var 或 const 就有意义。那是生命周期函数/变量吗？

由于它位于class主体内部，因此这不是全局变量。在这种情况下，state是一个将设置为 的实例的属性Counter，因此您可以通过 访问该属性this.state。

我是否必须从 react 中导入组件？我记得我不需要在 v15 中这样做。

使用类创建组件时，您需要扩展Component该类，因此在这种情况下：是的，您需要导入，Component或者您也可以使用class Counter extends React.Component。

prevState 来自哪里？

同样，一个 ES6 特性。传递给该this.setState()方法的是一个函数。它可能会令人困惑，因为这是一个箭头函数=>。所以previousState实际上是该函数的一个参数。为了帮助大家看图，上面的代码类似于 ：

this.setState(function (prevState) {
  return {
    value: prevState.value - 1
  };
});

但是，“普通”函数和箭头函数之间存在一些差异，因此我建议您搜索 ES6 功能以便更熟悉它。