在状态内部定义的数据和在构造函数内部创建的外部状态有什么不同？答案

【问题标题】：What is the diferent about data that defined inside the state and outside state that create inside the constructor?在状态内部定义的数据和在构造函数内部创建的外部状态有什么不同？
【发布时间】：2020-01-23 00:48:38
【问题描述】：

你能像这样解释一下关于状态内部和外部状态的数据的不同吗：

constructor(){
this.data1 = "this is data 1", 
this.state = {
this.data2 = "this is data 2"}
}

因此，如果我在 componentDidMount 或渲染函数中使用 data 2 而没有任何条件代码，它将抛出描述 React 不允许无限循环 bla bla bla 的错误，但如果我在 componentDidMount 或渲染函数中使用 data1，它完美运行。那么差异网络是什么？我应该使用 data1 来让自己获得更多的灵活性吗？

【问题讨论】：

首先这甚至不是有效的Javascript。但无论如何，两者之间的区别在于状态内的数据是与组件渲染相关的数据。如果数据是静态的，或者在更改时不需要重新渲染，您可以在状态之外将其定义为实例变量（就像您对data1 所做的那样）。如果更改它应该触发重新渲染，那么你应该将它存储在你的状态中。

标签： javascript reactjs state

【解决方案1】：

这是一个有效的语法

constructor(){
   this.data = "this is data 1"; 
}

这不是一个有效的语法

constructor(){
  this.state = {
    this.data = "this is data 2"
  } 
}

但是，这是有效的

constructor(){
   this.state = {
     data: "this is data 2"
  } 
}

所以这里有什么区别。

1 是有效的，但是在更改 this.data = 'Some new value' 之类的值时不会触发组件渲染，如果您在 jsx/html 中显示此值，除非其他一些状态更改触发渲染功能，否则不会反映更新后的值。

3 是定义状态变量的方式，你永远不应该mutate 或像this.state.data = 'some value' 那样直接更新状态。您需要更新 this.setState({ data: 'some new value' }) 之类的值，这将触发渲染功能

【讨论】：

请高手解释
你的意思是 this.data1 = "some new value" 而不是 this.data2 = "some new value" 从你的第一个解释？
@argawirawan 不，是一样的。我刚刚全部更新为this.data
很好很好