1. 首页
  2. 问题
  3. ReactJS中this.state和this.setstate有什么区别？
一尘不染

ReactJS中this.state和this.setstate有什么区别？

javascript

我想更改hasSubmit密钥的值，例如在“第一代码”部分中。我知道不推荐这样做。但是第二个代码是异步的，我不想使用的回调函数setState。

  • 是什么的差异this.state和setState？
  • 有什么办法可以hasSubmit立即更改状态值？

第一个代码：

this.state.hasSubmit = false
this.setState({})
//Code that will use `hasSubmit`.

第二个代码：

this.setState({
   hasSubmit: false,
});
//Code that will use `hasSubmit`.

加：

该方案是：

  1. hasSubmit设置false在getInitialState()。
  2. hasSubmit``false单击submit按钮时将变为。
  3. hasSubmit将true在提交时更改为。

首次点击submit没有问题，hasSubmit并将其设置为true。

但是submit使用时Second asynchronous code，第二次单击将是错误的，因为hasSubmit仍然可以true，而First Code可以解决问题。


阅读 475

收藏
2020-05-01

共1个答案

一尘不染

这是React文档所说的：

切勿this.state直接进行更改，因为之后调用setState（）可能会替换您所做的更改。将此this.state视为不可变的。

setState()不会立即使this.state发生变化，而是创建一个待处理的状态转换。this.state调用此方法后进行访问可能会返回现有值。

无法保证对setState的调用的同步操作，并且可能为提高性能而对调用进行批处理。
setState()除非在中实现了条件渲染逻辑，否则它将始终触发重新渲染shouldComponentUpdate()。

如果正在使用可变对象，并且无法在中实现逻辑shouldComponentUpdate()，则setState()仅在新状态与先前状态不同时进行调用才能避免不必要的重新渲染。

按照API的设计方式使用API​​总是明智的。如果文档说不改变您的状态，那么最好不要改变您的状态。

尽管setState()从技术上讲可能是异步的，但以任何明显的方式肯定不会变慢。该组件的render()功能将在很短的时间内被调用。

直接设置状态的一个缺点是阵营的生命周期方法- ，，shouldComponentUpdate()
-依赖于状态转换被调用。如果直接更改状态并使用空对象进行调用，则无法再实现这些方法。componentWillUpdate()``componentDidUpdate()``setState()``setState()

另一个是它只是不好的编程风格。您用两个语句执行的操作可能要执行一次。

而且，这里没有实际的好处。在这两种情况下，render()只有在调用setState()（或forceUpdate()）之后才被触发。

您声称需要执行此操作，而没有实际解释该需求是什么。也许您想进一步详细说明问题。可能有更好的解决方案。

最好使用框架而不是反对框架。

更新

从下面的评论：

我需要在下面使用更改后的hasSubmit。

好的我现在明白了。如果您需要立即使用future状态属性，那么最好的选择就是将其存储在局部变量中。

const hasSubmit = false;

this.setState({
  hasSubmit: hasSubmit
});

if (hasSubmit) { 
  // Code that will use `hasSubmit` ...
2020-05-01