JS ES6 클래스 정의 : Preact 홈페이지에 대한 예제 : 본 적이 한번도 없습니다

Question

다음 예제는 Preact homepage에 있습니다. 나는 어떻게/왜 동등한가 = 할당 및 세미콜론 ; 클래스 중괄호 안에 {} 내에 궁금하네요. 나는 몇 분 동안 봤는데, 그것을 알아낼 수 없습니다.

이 TypeScript 또는 다른 고급 JS 사촌이 맞습니까? 중괄호는 클래스 정의가 아닌 일반 할당과 같습니다.

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이 예제를 단순화하는 데 사용되기로되어 있음을 의미합니다.