Javascript react.js 中的生命周期事件状态和 prevState
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39806802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
lifecycle event state and prevState in react.js
提问by Maria Jane
Below is a simple counter in react. But I have 3 questions.
下面是一个简单的反应计数器。但我有3个问题。
What is state in line 3? It looks like a global variable, it would make sense if it has
varorconstbefore it. Is that a lifecycle function/var?Do I have to import Component from react? I remember I did not need do that in v15.
Where does prevState come from?
第 3 行中的 state 是什么？它看起来像一个全局变量，如果它有
var或const在它之前就有意义。那是生命周期函数/var吗？我是否必须从 react 中导入组件？我记得在 v15 中我不需要这样做。
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> ) } }
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> ) } }
回答by Piotr Berebecki
Here is a demo with a commented-out code to give you more information: http://codepen.io/PiotrBerebecki/pen/rrGWjm
这是一个带有注释代码的演示，可为您提供更多信息：http: //codepen.io/PiotrBerebecki/pen/rrGWjm
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?
1. 第 3 行中的 state 是什么？看起来像一个全局变量，如果它前面有 var 或 const 就有意义。那是生命周期函数/var吗？
statein line 3 is just a property of the Counter component. Another way of initialising a state in React using ES6 syntax is as follows:
state第 3 行只是 Counter 组件的一个属性。另一种使用 ES6 语法在 React 中初始化状态的方法如下：
constructor() {
super();
this.state = {
value: 0
}
}
React docs: https://facebook.github.io/react/docs/reusable-components.html#es6-classes
反应文档：https: //facebook.github.io/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 set up your own state property in the constructor.
[React ES6 class] API 与 React.createClass 类似，但 getInitialState 除外。不是提供单独的 getInitialState 方法，而是在构造函数中设置自己的 state 属性。
2. Do I have to import Component from react? I remember I need not to do that in v15.
2. 我必须从 react 中导入组件吗？我记得我不需要在 v15 中这样做。
You can alternatively just import React and define a class in the following way:
您也可以通过以下方式导入 React 并定义一个类：
import React from 'react';
class Counter extends React.Component {
...
The below would also allow you to use Component API:
下面还允许您使用组件 API：
import React, { Component } from 'react';
class Counter extends Component {
...
3. Where does prevState come from?
3. prevState 来自哪里？
The prevState comes from the setState api: https://facebook.github.io/react/docs/component-api.html#setstate
prevState 来自 setState api：https://facebook.github.io/react/docs/component-api.html#setstate
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:
也可以传递带有签名 function(state, props) 的函数。在某些情况下，当您希望在设置任何值之前将查询 state+props 的先前值的原子更新排队时，这可能很有用。例如，假设我们想增加 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')
);
回答by Diego Cardoso
There are some features in your code that are related with the ES6 (ES2015) version, so that's why you might be confused:
您的代码中有一些与 ES6 (ES2015) 版本相关的功能，因此您可能会感到困惑：
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?
第 3 行中的 state 是什么？看起来像一个全局变量，如果它前面有 var 或 const 就有意义。那是生命周期函数/var吗？
As it is inside a classbody, this is not a global variable. In this case stateis a property that will be set to the instances of Counter, so you could access that by this.state.
由于它位于class主体内部，因此这不是全局变量。在这种情况下，state是一个将设置为 的实例的属性Counter，因此您可以通过 访问它this.state。
Do I have to import Component from react? I remember I need not to do that in v15.
我是否必须从 react 中导入组件？我记得我不需要在 v15 中这样做。
When creating a component using a class, you need to extend the Componentclass, so in this case: yes you need to import Componentor you could've used class Counter extends React.Componentas well.
使用类创建组件时，您需要扩展Component该类，因此在这种情况下：是的，您需要导入，Component或者您也可以使用class Counter extends React.Component。
Where does prevState come from?
prevState 来自哪里？
Again, a ES6 feature. What is being passed to the this.setState()method is a function. It might be confusing because this is a arrow function =>. So previousStateis actually a parameter of that function. To help you to see the picture, the above code is similarto that:
再次，ES6 特性。传递给该this.setState()方法的是一个函数。这可能会令人困惑，因为这是一个箭头函数=>。所以previousState实际上是该函数的一个参数。为了帮助大家看图，上面的代码类似：
this.setState(function (prevState) {
return {
value: prevState.value - 1
};
});
There are some differences between 'normal' and an arrow functions, though, so I suggest you to search for the ES6 features in order to be more familiar with it.
但是，“普通”函数和箭头函数之间存在一些差异，因此我建议您搜索 ES6 功能以便更熟悉它。
