Question

我已经看到一些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>

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

Answer 1

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

巴贝尔也会这样说。

给出这些代码示例：

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'
  };
};

您可以使用这些代表constructor - fields自行玩。

在不使用构造函数的情况下在reactjs中初始化状态

1 个答案: