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

Question

我想更改 hasSubmit 键的值，如第一个代码部分中所示。我知道不建议这样做。但是第二个代码是异步的，我不想使用setState的回调函数。

• this.state 和 setState 有什么区别？
• 有没有办法立即更改状态值hasSubmit？

First Code:

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

Second code:

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

<小时/>

添加:

场景是这样的:

1. hasSubmit set false in getInitialState().
2. hasSubmit will change to false when I click submit button.
3. hasSubmit will change to true when submitted.

第一次点击submit没有问题，hasSubmit将被设置为true。

但是使用第二个异步代码第二次点击submit将会出错，因为hasSubmit仍然是true ，而第一代码可以解决该问题。

Answer 1

这就是React docs说:

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains. setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate().

If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

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

同时setState()技术上可能是异步的，但它肯定不会以任何明显的方式慢。该组件的render()函数将以相当短的顺序被调用。

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

另一个原因是它的编程风格很糟糕。您在两个语句中完成了可以在一个语句中完成的事情。

此外，这里没有任何实际好处。在这两种情况下，render()直到 setState() 之后才会被触发(或 forceUpdate() )被调用。

您声称需要这样做，但没有实际解释该需求是什么。也许您想更详细地描述您的问题。可能有更好的解决方案。

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

更新

来自下面的评论:

The need is that I want use the changed hasSubmit in below.

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

const hasSubmit = false;

this.setState({
  hasSubmit: hasSubmit
});

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