这个.state和this.setstate在ReactJS中有什么区别

What the difference of this.state and this.setstate in ReactJS?

本文关键字：什么 区别 ReactJS state this setstate 这个      更新时间：2023-09-26

我想更改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 getInitialState() false设置。
  2. 当我单击hasSubmit按钮时submit将更改为false。
  3. 提交后，hasSubmit将更改为true。

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

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

以下是 React 文档的内容：

切勿直接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。

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

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

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

  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

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

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

模式

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

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

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

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

如果你只是直接更新this.state的任何参数而不setState react 渲染 mecanizm 将不知道某些状态参数已更新。

相关文章：