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

Question

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

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

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

3. 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吗？

state第3行只是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除外.您可以在构造函数中设置自己的state属性,而不是提供单独的getInitialState方法.

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

您也可以通过以下方式导入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

也可以使用签名函数(state,props)传递函数.在某些情况下,当您想要在设置任何值之前将参与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')
);