Question

我想更改hasSubmit键的值，就像在First Code部分中一样。我知道这不推荐。但第二个代码是异步的，我不想使用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`.

添加

情景是：

hasSubmit在false中设置getInitialState()。
  点击hasSubmit按钮后，
false将更改为submit。
  提交后，
hasSubmit将更改为true。

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

但使用submit第二次点击Second asynchronous code会出错，因为hasSubmit仍然是true，而First Code可以解决问题。< / p>

Answer 1

这是React docs所说的：

不要直接改变this.state，因为之后调用setState（）可能会替换你所做的突变。把this.state看作是不可变的。

setState()不会立即改变this.state，但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

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

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

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

虽然setState()可能在技术上是异步的，但它肯定不会以任何明显的方式缓慢。组件的render()函数将以很短的顺序调用。

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

另一个原因是它的编程风格很糟糕。你在两个陈述中做了你可以做的一件事。

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

您声称有必要这样做而不实际解释需要的是什么。也许您想更详细地详述您的问题。这可能是一个更好的解决方案。

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

更新

来自以下评论：

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

好的，我现在明白了。如果您需要立即使用未来的州财产，最好的办法就是将其存储在本地变量中。

const hasSubmit = false;

this.setState({
  hasSubmit: hasSubmit
});

if (hasSubmit) { 
  // Code that will use `hasSubmit` ...

Answer 2

如果你想改变状态并通过反应触发重新渲染： 使用第二个代码。

  this.setState({
    hasSubmit: false,
  });

第一个代码的问题/错误：

  this.state.hasSubmit = false      // Updates state directly: 
                                    // You are not supposed to do this
                                    // except in ES6 constructors
  this.setState({})                 // passes an empty state to react.
                                    // Triggers re-render without mutating state

Answer 3

this.setState维持反应组件的生命周期并且看起来不像变异变量（即使在内部它确实会改变状态）。因此，保持反应循环中的单向流动而没有任何副作用。

警告是使用this.setState不能与ES6类中的构造函数一起使用。我们需要在ES6构造函数中使用this.state =模式而不是this.setState

Answer 4

你永远不应该忽视文档建议。在编写本文时，setState允许第二个参数，它是setState和re-render完成时的回调函数。由于您从未向我们提供您的代码将如何使用hasSubmit值，我相信其他人可能会发现这有用，因为他们想要确保hasSubmit已被更改。

Answer 5

您应该在第一个示例中使用this.forceUpdate()来强制更新状态。例如：

this.state.hasSubmit = false;
this.forceUpdate();

但最好使用this.setState，因为它是React引擎的初始本地检查状态机制，这比强制更新更好。

如果您只是在没有this.state反应的情况下直接更新setState的任何参数，那么渲染mecanizm将不会知道某些状态参数更新。

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

5 个答案:

更新