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

lifecycle event state and prevState in react.js

本文关键字：事件 状态 prevState 周期 生命 js react      更新时间：2023-09-26

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

  1. 第三行state是什么?它看起来像一个全局变量，如果前面有var或const就有意义。这是生命周期函数/var吗?

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

  3. prestate从何而来?

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。第三行中的state是什么?它看起来像一个全局变量判断它前面是否有var或const。这是生命周期吗?函数/var ?

第3行中的

state只是Counter组件的一个属性。在React中使用ES6语法初始化状态的另一种方法如下:

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

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

[React ES6类]API类似于React。createClass，除了getInitialState。而不是提供单独的getInitialState方法，您可以在构造函数中设置自己的state属性。

2。我必须从react中导入Component吗?我记得我

你也可以直接导入React，然后用下面的方式定义一个类:

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

下面的代码也允许你使用组件API:

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

3。prevState从何而来?

prestate来自setState api: https://facebook.github.io/react/docs/component-api.html#setstate

也可以传递带有签名的函数函数(状态、道具)。当您需要时，这在某些情况下是有用的的上一个值加入原子更新队列在设置任何值之前State +props。例如，假设我们想要在状态

中增加一个值
this.setState(function(previousState, currentProps) {
  return {
     value: previousState.value + 1
  };
});

您将经常看到开发人员以以下方式更新状态。这比上面的方法更不可靠，因为状态可能是异步更新的，我们不应该依赖它的值来计算下一个状态。

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

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

你的代码中有一些与ES6 (ES2015)版本相关的功能，所以这就是为什么你可能会感到困惑:

第3行state是什么?它看起来像一个全局变量，如果它前面有var或const，这是有意义的。这是生命周期函数/var吗?

因为它在class体中，所以它不是一个全局变量。在这种情况下，state是一个属性，将被设置为Counter的实例，因此您可以通过this.state访问它。

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

当使用类创建组件时，您需要扩展Component类，所以在这种情况下:是的，您需要导入Component，或者您也可以使用class Counter extends React.Component。

prestate从何而来?

同样是ES6的特性。传递给this.setState()方法的是一个函数。这可能令人困惑，因为这是一个箭头函数=> 。所以previousState实际上是这个函数的一个参数。为了帮助您看清图片，上面的代码与类似:

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

"普通"和箭头函数之间有一些区别，所以我建议你搜索一下ES6的功能，以便更熟悉它。

相关文章：