JS ES6 class 定义：Preact 主页上的示例：我从未见过这个

Question

下面的例子在Preact homepage上。我想知道 how/why 在 class 大括号 {} 中有等于 = 赋值和分号 ;。我已经用谷歌搜索了几分钟，但似乎无法弄清楚。

这是 TypeScript 还是其他一些花哨的 JS 表亲？大括号看起来像常规赋值，而不是 class 定义。

export default class TodoList extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.target.value });
    };
    addTodo = () => {
        let { todos, text } = this.state;
        todos = todos.concat({ text });
        this.setState({ todos, text: '' });
    };
    render({ }, { todos, text }) {
        return (
            <form onSubmit={this.addTodo} action="javascript:">
                <input value={text} onInput={this.setText} />
                <button type="submit">Add</button>
                <ul>
                    { todos.map( todo => (
                        <li>{todo.text}</li>
                    )) }
                </ul>
            </form>
        );
    }
}

Answer 1

这些是 class instance fields（属性初始值设定项）。他们目前是第 2 阶段提案。

它们的使用（与 import、export 和其他 JS 引擎本身不支持的特性一起使用）意味着应该使用 Babel 来转换示例。

JS ES6 class 定义：Preact 主页上的示例：我从未见过这个

JS ES6 class definition: Example on Preact homepage: I've never seen this

javascript

ecmascript-6

preact