在不使用构造函数的情况下在 reactjs 中初始化状态 [重复]答案

【问题标题】：Initialising state in reactjs without using constructor [duplicate]在不使用构造函数的情况下在 reactjs 中初始化状态 [重复]
【发布时间】：2018-07-05 20:47:27
【问题描述】：

看过一些reactjs课程，组件状态直接初始化，不使用构造函数，如下图。

class App extends React.Component {
  state = {
    text: 'hello world'
  }
  render() {
    return <div><h4>{this.state.text}</h4></div>
  }
}

ReactDOM.render(<App/>,document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

这是一种推荐的方式来初始化组件状态而不将其包装在构造函数中吗？

【问题讨论】：

完全一样，我认为没有区别。通常，您应该在推荐的构造函数中初始化状态，因为当您的组件被调用构造函数时，就会立即被调用。所以在构造函数中初始化状态很好。

标签： reactjs

【解决方案1】：

这是目前处于第 3 阶段的class fields declarations 的提案。
它基本上在幕后做同样的事情。

babel 会以同样的方式编译它。

给出这些代码示例：

class MyClass {
  state = {
    myVal: 'Hello world'
  }
}

还有

class MyClass {
  constructor() {
    this.state = {
      myVal: 'Hello world'
    }
  }
}

两者都将转换为：

var MyClass = function MyClass() {
  _classCallCheck(this, MyClass);

  this.state = {
    myVal: 'Hello world'
  };
};

您可以使用这些 repl 的 constructor - fields 自己玩。

【讨论】：