Состояние события жизненного цикла и prevState в react.js

Ответ 1

Вот демо с кодом с комментариями, чтобы предоставить вам дополнительную информацию: http://codepen.io/PiotrBerebecki/pen/rrGWjm

1. Что такое состояние в строке 3? которые выглядят как глобальная переменная, это делает   смысл, если перед ним есть var или const. Это жизненный цикл   Функция/вар?

state в строке 3 является просто свойством компонента Counter. Другой способ инициализации состояния в React с использованием синтаксиса ES6 выглядит следующим образом:

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

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

API [React ES6 class] похож на React.createClass, за исключением getInitialState. Вместо предоставления отдельного getInitialState метод , вы создадите собственное свойство состояния в конструкторе.

2. Должен ли я импортировать компонент из реакции? Я помню, я   не нужно делать это в v15.

Вы также можете просто импортировать React и определить класс следующим образом:

import React from 'react';

class Counter extends React.Component {
...

Ниже вы также можете использовать API-интерфейс компонентов:

import React, { Component } from 'react';

class Counter extends Component {
... 

3. Откуда берется prevState?

Предыдущее состояние происходит из setState api: https://facebook.github.io/react/docs/component-api.html#setstate

Также возможно передать функцию с сигнатурой функция (состояние, реквизит). Это может быть полезно в некоторых случаях, когда вы хотите для установки атомарного обновления, которое запрашивает предыдущее значение 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')
);

Ответ 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
  };
});

Однако существуют некоторые различия между "нормальными" и функциями стрелок, поэтому я предлагаю вам искать функции ES6, чтобы лучше ознакомиться с ним.