Question

任何人都可以向我解释这两种实现之间的区别。第一个实现并没有像我预期的那样工作

//Setting state in constructor through a variable
this.list;
this.state = {
   Items: list
};
//Implementation 1
var temp = "result after logic";
this.setState({
   Items: temp
});
//Implementation 2
var temp = "result after logic";
this.list = temp;
this.setState({
   Items: this.list
});

Answer 1

实施1： 由于缺少列表声明，这将导致错误。 this.state = 会将您的状态设置为 Items：list ，丢弃状态中存储的所有其他数据。它主要用于初始化。

实施2：

您的状态＆＃34;项目＆＃34;现在是＆＃34;结果是逻辑＆＃34;并且你的组件将重新渲染。

实施3：

this.list在逻辑＆＃34;之后具有值＆＃34;结果。它现在可以在您的组件中全局使用。
您的状态＆＃34;项目＆＃34;现在是＆＃34;结果是逻辑＆＃34;并且你的组件将重新渲染。

差别在于，this.list可以在任何地方访问，就像州一样。但是，如果更改this.list的值，则不会导致组件重新呈现。所以你可以这样做：

methodA(){
  var temp = "result after logic";
  this.list = temp;
  methodB();
}

methodB(){
  this.setState = {
    Items: this.list
  };
}

this.list将是已知的，即使您在methodA（实现3）中定义了它。

在另一种情况下（实现2），你不可能这样做，因为var temp只能在methodA中知道，而不是methodB，除非你把它作为参数传递。

Answer 2

您在构造函数中使用this.state = { clicked: false }来描述组件的初始状态。稍后 - 例如在onClick处理程序中，您使用this.setState({ clicked: false })来更改组件的状态 - 但是有一个捕获 - 它是异步功能。

您可以在文档中了解它 - https://reactjs.org/docs/react-component.html#setstate，还有一篇关于它的好文章 - https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b。

总结一下：

this.state = Object - ＆gt;在构造函数中使用它来描述初始化组件状态 - 仅在构造函数中使用
this.setState(Object) - ＆gt;在构造函数外面到处使用它 - 记住它是异步的！

设置为变量和设置状态以及直接在ReactJs中设置状态之间的区别

2 个答案: