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

Question

我想更改hasSubmit密钥的值,就像在第一个代码部分中一样.我知道这不推荐.但第二个代码是异步的,我不想使用的回调函数setState.

• 是什么的差异this.state和setState？
• 有没有办法hasSubmit立即改变国家价值？

第一个代码: hasSubmit

第二个代码: false

---

加:

场景是:

1. getInitialState()设置hasSubmit在false.
2. submithasSubmit当我点击true按钮时会改变.
3. submit将hasSubmit在提交时更改为.

第一次单击true没有问题,submit将被设置为Second asynchronous code.

但是第二次点击hasSubmit将使用错误true,因为First Code它仍然是hasSubmit,而setState可以解决问题.

Answer 1

以下是React文档所说的内容:

永远不要this.state直接变异,因为之后调用setState()可能会替换你所做的变异.把this.state看作是不可变的.

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

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

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

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

虽然setState()技术上可能是异步的,但它肯定不会以任何明显的方式变慢.组件的render()功能将以非常短的顺序调用.

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

另一个是它只是糟糕的编程风格.你在两个陈述中做了你可以做的一个.

而且,这里没有实际的好处.在这两种情况下,render()直到调用setState()(或forceUpdate())之后才会触发.

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

最好使用框架而不是框架.

UPDATE

从下面的评论:

需要的是我想在下面使用改变的hasSubmit.

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

const hasSubmit = false;

this.setState({
  hasSubmit: hasSubmit
});

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

Answer 2

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

需要注意的是 usingthis.setState不适用于 ES6 类中的构造函数。我们需要使用this.state =模式而不是this.setState在 ES6 构造函数中

Answer 3

如果要通过反应来更改状态并触发重新渲染， 请使用第二个代码。

  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 4

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