gpt4 book ai didi

javascript - React.js 中的生命周期事件状态和 prevState

转载 作者:行者123 更新时间:2023-12-03 13:05:43 25 4
gpt4 key购买 nike

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

  1. 第 3 行的状态是什么?它看起来像一个全局变量,如果它前面有 varconst 就有意义。这是生命周期函数/var吗?

  2. 我必须从 React 导入组件吗?我记得在 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

<强>1。第 3 行的状态是什么?看起来像一个全局变量,它使得 判断它前面是否有 var 或 const。这就是生命周期吗 函数/var?

第 3 行中的

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

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

React 文档: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.

<强>2。我必须从 React 导入组件吗?我记得我 在 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

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:

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

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

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

来 self 的代码笔的完整代码:

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

关于javascript - React.js 中的生命周期事件状态和 prevState,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39806802/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com