2017-02-22 1 views
4

Ich habe eine Lektion über [Use ES2016 Property Initializer Syntax in ES6 classes] auf egghead.io, und ich bin mir nicht ganz sicher - ist es eine gute Praxis, es zu verwenden. Hier ist eine regelmäßige Stateful Reagieren Komponente von der oberen Lektion erwähnt:Ist es ein gutes Reaction-Muster, ES2016 Property Initialiser Syntax in ES6-Klassen zu verwenden

class App extends Component { 
    constructor() { 
    super() 
    this.state = { 
     todos: [], 
     currentTodo: '' 
    } 
    } 
this.handleInputChange = this.handleInputChange.bind(this) 

    handleInputChange (evt) { 
    this.setState({ 
     currentTodo: evt.target.value 
    }) 
    } 

    render() { 
    return (
    ... 
      <TodoForm handleInputChange={this.handleInputChange} 
      currentTodo={this.state.currentTodo} 
      <TodoList todos={this.state.todos}/> 
    ... 
    ); 
    } 
} 

Hier ist die gleiche Refactoring Komponente ES2016 Syntax:

class App extends Component { 
    state = { 
    todos: [], 
    currentTodo: '' 
    } 

    handleInputChange = (evt) => { 
    this.setState({ 
     currentTodo: evt.target.value 
    }) 
    } 

    render() { 

    return (
    ... 
      <TodoForm handleInputChange={this.handleInputChange} 
      currentTodo={this.state.currentTodo} 
      <TodoList todos={this.state.todos}/> 
    ... 
    ); 
    } 
} 

Antwort

4

Ja es eine sehr gute Praxis ist, es zu benutzen. Es gibt keinen Grund, eine Bindung manuell auszuführen, wenn der Eigenschaftsinitialisierer dies für Sie erledigt: Der Code ist viel sauberer und Sie streuen den Code nicht mit anderen Einzeilenbefehlen.

+0

Aber momentan ist es nicht sehr beliebt, eigentlich habe ich es noch nicht gesehen. Und ich nehme an, es wird nicht empfohlen, in Produktionscode –

+0

@TarasYaremkiv zu verwenden Es ist in vielen Beispielen, die hier jeden Tag gepostet werden. Warum sollte man nicht in der Produktion verwenden? –

+0

Ich denke, weil ES7 heutzutage nicht so weit unterstützt wird wie ES6. Alles was ich tun muss, um dies in Webpack zu verwenden, ist npm install --save-dev babel-preset-es2016 und baber.rc zu "presets" ändern: ["es2016"]? –

Verwandte Themen