Question

下面是一个简单的反击计数器。但我有3个困惑。

第3行的状态是什么？看起来像一个全局变量，如果它前面有var或const则有意义。这是一个生命周期函数/ var？
我是否必须从反应中导入组件？我记得我不需要在第15节那样做。
prevState来自哪里？

import React, { Component } from 'react';

class Counter extends Component {
  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>
    )
  }
}

Answer 1

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

<强> 1。第3行的状态是什么？它看起来像一个全局变量感觉它之前是否有var或const。这是一个生命周期功能/ VAR吗

第3行中的

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

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

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

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

<强> 2。我必须从反应中导入组件吗？我记得我不需要在第15节那样做。

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

import React from 'react';

class Counter extends React.Component {
...

以下内容还允许您使用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

也可以传递带签名的功能功能（状态，道具）。在某些情况下，这在您需要时非常有用将一个原子更新排入队列以获取前一个值设置任何值之前的state + props。例如，假设我们想要增加状态值：

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

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

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

我的codepen中的完整代码：

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')
);

Answer 2

您的代码中有一些与ES6（ES2015）版本相关的功能，这就是您可能会感到困惑的原因：

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

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

我必须从反应中导入组件吗？我记得我不需要在第15节那样做。

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

prevState来自哪里？

再次，ES6功能。传递给this.setState()方法的是函数。这可能会令人困惑，因为这是一个箭头函数=> 。所以previousState实际上是该函数的一个参数。为了帮助您查看图片，上面的代码与类似：

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

＆＃39;正常＆＃39;之间存在一些差异。但是，箭头功能，所以我建议你搜索ES6功能，以便更熟悉它。

react.js中的生命周期事件状态和prevState

2 个答案: