ReactJS 中 this.state 和 this.setstate 的区别是什么? [英] What the difference of this.state and this.setstate in ReactJS?

查看:43
本文介绍了ReactJS 中 this.state 和 this.setstate 的区别是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

  • this.statesetState 有什么区别?
  • 有没有办法立即改变状态值hasSubmit?
<块引用>

第一个代码:

this.state.hasSubmit = falsethis.setState({})//将使用`hasSubmit`的代码.

<块引用>

第二个代码:

this.setState({hasSubmit:假,});//将使用`hasSubmit`的代码.

<小时>

添加:

场景是:

<块引用>

  1. hasSubmitgetInitialState() 中设置 false.
  2. 当我单击 submit 按钮时,
  3. hasSubmit 将更改为 false.
  4. 提交时
  5. 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.

好的,我现在明白了.如果您需要立即使用未来状态属性,最好的办法就是将其存储在局部变量中.

const hasSubmit = false;this.setState({hasSubmit: hasSubmit});如果(已提交){//将使用 `hasSubmit` 的代码 ...

I want to change the value for the hasSubmit key, like in the First Code section. I know this is not recommended. But the second code is asynchronous and I don't want to use the callback function of setState.

  • What is the difference of this.state and setState?
  • Is there any way to change state value hasSubmit immediately?

First Code:

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

Second code:

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


ADD:

The scenario is that:

  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.

First click submit has no problem and hasSubmit will be set to true.

But second click submit will be wrong using the Second asynchronous code, because the hasSubmit is still true, while the First Code can resolve the problem.

解决方案

Here's what the React docs say:

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.

It's always sensible to use APIs in the way they were designed. If the docs say don't mutate your state, then you'd better not mutate your state.

Whilst setState() might be technically asynchronous, it's certainly not slow in any noticeable way. The component's render() function will be called in pretty short order.

One drawback of setting state directly is that React's lifecycle methods - shouldComponentUpdate(), componentWillUpdate(), componentDidUpdate() - depend on state transitions being called with setState(). If you change the state directly and call setState() with an empty object, you can no longer implement those methods.

Another is that it's just bad programming style. You're doing in two statements what you could be doing in one.

Moreover, there's no actual benefit here. In both cases, render() is not going to be triggered until after setState() (or forceUpdate()) is called.

You claim a need to do this without actually explaining what that need is. Perhaps you'd like to detail your problem a little more. There's probably a better solution.

It's best to work with the framework rather than against it.

UPDATE

From the comments below:

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

OK, I understand now. If you need to immediately use the future state property, your best bet is just to store it in a local variable.

const hasSubmit = false;

this.setState({
  hasSubmit: hasSubmit
});

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

这篇关于ReactJS 中 this.state 和 this.setstate 的区别是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆