react.js中的生命周期事件状态和prevState [英] lifecycle event state and prevState in react.js

问题描述

下面是一个简单的反应计数器.但是我有3个问题.

Below is a simple counter in react. But I have 3 questions.

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

1. What is state in line 3? It looks like a global variable, it would make sense if it has var or const before it. Is that a lifecycle function/var?

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

Do I have to import Component from react? I remember I did not need do that in v15.

prevState来自哪里?

Where does prevState come from?

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>
    )
  }
}

推荐答案

以下是带有注释代码的演示，可为您提供更多信息:

Here is a demo with a commented-out code to give you more information: http://codepen.io/PiotrBerebecki/pen/rrGWjm

1.第3行的状态是什么?看起来像一个全局变量，它使 知道它前面是否有var或const.那是生命周期吗 函数/变量?

1. What is state in line 3? that look like a global variable, it make sense if it has var or const before it. Is that a lifecycle function/var?

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

state in line 3 is just a property of the Counter component. Another way of initialising a state in React using ES6 syntax is as follows:

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 方法，您可以在构造函数中设置自己的状态属性.

The [React ES6 class] API is similar to React.createClass with the exception of getInitialState. Instead of providing a separate getInitialState method, you set up your own state property in the constructor.

2.我必须从react导入Component吗?我记得我 无需在v15中执行此操作.

2. Do I have to import Component from react? I remember I need not to do that in v15.

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

You can alternatively just import React and define a class in the following way:

import React from 'react';

class Counter extends React.Component {
...

以下还允许您使用组件API:

The below would also allow you to use 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

The prevState comes from the setState api: https://facebook.github.io/react/docs/component-api.html#setstate

也可以传递带有签名的函数 功能(状态，道具).在某些情况下，这可能会很有用 排队查询先前的值的原子更新 设置任何值之前，请先输入state + props.例如，假设我们想要 增加状态中的值:

It's also possible to pass a function with the signature function(state, props). This can be useful in some cases when you want to enqueue an atomic update that consults the previous value of state+props before setting any values. For instance, suppose we wanted to increment a value in state:

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

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

You will often see developers updating state in the following way. This is less reliable than the above method as state may be updated asynchronously and we should not rely on its values for calculating the next state.

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

我的代笔中的完整代码:

Full code from my 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')
);

这篇关于react.js中的生命周期事件状态和prevState的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！