react.js中的生命周期事件状态和prevState

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

  2. 我必须从react导入Component吗？我记得我在v15中不需要这样做。

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

state第3行中的内容只是Counter组件的一个属性。使用ES6语法在React中初始化状态的另一种方式如下：

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方法，而是

。

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

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

下面还允许您使用组件API：

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

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')
);

以上是 react.js中的生命周期事件状态和prevState 的全部内容， 来源链接： utcz.com/qa/407777.html

回到顶部