反应:this.state = and this.setstate之间的区别

Question

在React I中具有状态变量名称1。有之间有任何区别吗？

之间是否有区别

this.state.name1 = value;

和

this.setState({name : value});

Answer 1

您通常会设置这样的初始状态：

this.state = {name1: value}

然后，当您需要更新时，您将使用setState：

this.setState(prevState => ({name1: newValue}));

Answer 2

是的是，有一个差异，在React应用程序中是两个不同的变量。

就像简单的JavaScript文件中的内容

一样

var name = value;
var name1 = value;

因此，this.setState({name : value});上的name上的设置状态设置了name的变量(状态(，其中this.state.name1 = value;更新name1

Answer 3

this.state.name1 = value;

上面的代码直接突变您的状态，这不是一个好主意 并导致反应变化检测周期的差异。

this.setState({name : value});

以上不会直接突变状态，并且是适当的方法 修改/更改您的状态。

实际上，您还可以将回调作为第二个参数添加到SETSTATE，该参数将在更改状态后执行。示例：

this.setState({name: value}, function() {
   // do something here after you have changed the state.
});

Answer 4

是的，有一个区别，您的第一个陈述是在this.state对象上分配name1属性，您应该避免使用它，因为有一个函数" setState"(您的第二个statment(这是为此完成的。

此功能可以采用一个对象或另一个功能，该函数依次采用以前的状态，并使您能够返回新的函数(并且在同一时间访问可以方便的先前状态值(

(

// Used to set the initial state in the construcor
// (but in some case you don't need a constructor
// and can just add state = { } directly in your class.
this.state = {
  foo: bar
}

// Set a new state by merging the existing one and the object
// you pass in setState()
this.setState({
  name: value1
})

// Set a new state with a function instead of an object
// and give you the previous state to manipulate it
// Here for example we use the previousState to create the new one
// (if isTrue was true, it's now false)
this.setState(previousState => ({
    isTrue: !previousState.isTrue 
  })
)

检查React文档以获取更多详细信息！