Lifecycle event state and prevState in react.js

Question

Below is a simple reaction counter. But I have 3 questions.

1. What is the state on line 3? It looks like a global variable, it makes sense if it is preceded by var or const . Is this a / var lifecycle function?

2. Should I import a component from the responsive? I remember I did not need to do this in v15.

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

Answer 1

Here is a demo with commentary code to provide you more information: http://codepen.io/PiotrBerebecki/pen/rrGWjm

1. What is the state on line 3? which look like a global variable, this makes sense if there is var or const in front of it. Is this a function / var life cycle?

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

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

React docs: https://facebook.imtqy.com/react/docs/reusable-components.html#es6-classes

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

2. Do I have to import a component from a reaction? I remember I do not need to do this in v15.

You can also simply import React and define the class as follows:

 import React from 'react'; class Counter extends React.Component { ... 

You can also use the component API below:

 import React, { Component } from 'react'; class Counter extends Component { ... 

3. Where does prevState come from?

The previous state comes from setState api: https://facebook.imtqy.com/react/docs/component-api.html#setstate

It is also possible to transfer a function with a signature to a function (state, props). This can be useful in some cases when you want to install an atomic update that asks for the previous state + props value before setting any values. For example, suppose we wanted to increase the value in the state:

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

You will often see how developers update the state as follows. This is less reliable than the above method, since the state can be updated asynchronously, and we should not rely on its values ​​to calculate the next state.

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

Full code from my code:

 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

The code has some features related to the ES6 version (ES2015), so you can confuse:

What is the state on line 3? which look like a global variable, it makes sense if there is var or const in front of it. Is this a / var life cycle function?

Like inside a class body, this is not a global variable. In this case, state is the property that will be set to Counter instances, so you can access this this.state value.

Should I import a component from a reaction? I remember I do not need to do this in version 15.

When creating a component using a class, you need to extend the Component class, so in this case: yes you need to import Component or you could use class Counter extends React.Component .

Where does prevState come from?

Again, the ES6 feature. What is passed to the this.setState() method is a function . This can be confusing because it is an arrow function => . So, previousState is actually a parameter of this function. To help you see the image, the above code is similar to this:

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

However, there are some differences between the “normal” and arrow functions, so I suggest you look for ES6 functions in order to get to know it better.