下面是一个简单的计数器。但是我有3个问题。
第3行的状态是什么?它看起来像一个全局变量,如果有var或const在它之前会很有意义。那是生命周期函数/变量吗?
var
const
我必须从react导入Component吗?我记得我在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> ) } }
这是一个带有注释代码的演示,可为您提供更多信息:http : //codepen.io/PiotrBerebecki/pen/rrGWjm
1.第3行的状态是什么? 看起来像全局变量,如果前面有var或const则有意义。那是生命周期函数/变量吗?
state第3行中的内容只是Counter组件的一个属性。使用ES6语法在React中初始化状态的另一种方式如下:
state
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方法,而是 在构造函数中设置自己的state属性 。
2.我必须从react导入Component吗? 我记得我不需要在v15中这样做。
您也可以通过以下方式导入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的值:
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') );