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

Posted 2023-02-22

【中文标题】如何在 React 中使用 ES6 类设置初始状态？

【英文标题】：How to set initial state with using ES6 class in React?

【发布时间】：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

另见：***.com/q/37782403/1531971 这看起来像重复。

set initial react component state in constructor or componentWillMount?的可能重复

【参考方案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>
        );
    

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

Babel with constructor Babel without constructor

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

【讨论】：

根据AST Explorer，这称为ClassProperty。

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