Question

在React中我有状态变量name1。两者之间有什么区别吗？

之间有什么区别吗？

this.state.name1 = value;

和

this.setState({name : value});

Answer 1

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

this.state = {name1: value}

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

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

Answer 2

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

就像简单的javascript文件一样

var name = value;
var name1 = value;

因此name this.setState({name : value});上的设置状态设置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属性，你应该避免它，因为有一个函数＆＃34; setState＆＃34; （你的第二个陈述）是为此而做的。

这个函数可以接受一个对象或另一个函数，它反过来采用先前的状态并让你能够返回一个新的（同时访问以前的状态值，这很方便）

// 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 documentation了解详情！

React：this.state =和this.setState之间的区别

4 个答案: