如何在 React 中使用 ES6 类设置初始状态？答案

【问题标题】：How to set initial state with using ES6 class in React?如何在 React 中使用 ES6 类设置初始状态？
【发布时间】：2018-03-24 16:44:43
【问题描述】：

我已经创建了下面的类

class App extends Component{
     render() {
         return (
             <div className="app"></div>
         );
     }
}

如何设置初始状态？
getInitialState() 不工作？我究竟做错了什么？
react 文档也没有帮助。

【问题讨论】：

检查反应文档How to set initial state in es-6 class component
另见：stackoverflow.com/q/37782403/1531971 这看起来像重复。
set initial react component state in constructor or componentWillMount?的可能重复

标签： reactjs state

【解决方案1】：

import React, { Component } from 'react';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: 'Hello World'
        };
    }
    render() {
        return (
            <div>
                {this.state.text}
            </div>
        );
    }
}

您可能还想查看这篇文章，了解何时使用构造函数和何时使用 getInitialState 之间的区别。

What is the difference between using constructor vs getInitialState in React / React Native?

【讨论】：

【解决方案2】：

还有一个Jenna的绝妙答案的捷径，不使用constructor或this：

class App extends Component {
    state = {
        text: 'Hello World'
    };

    render() {
        return (
            <div>
                {this.state.text}
            </div>
        );
    }
}

一个简化的例子表明两种情况下的输出是相同的：

但如果我们扩展一个父类，转译后的输出确实会有所不同，因为构造函数中的参数数量是未知的。

【讨论】：

根据AST Explorer，这称为ClassProperty。
在发现这种语法之后，我们考虑将它也用于方法，作为绑定的替代方案。但是this article 说服了我们！