2017-02-22 8 views
4

egghead.ioで約 [Use ES2016 Property Initializer Syntax in ES6 classes]のレッスンを見ましたが、それはよく分かりません。 はここで、上に述べた教訓から、定期的に反応させ、ステートフルなコンポーネントです: ES2016プロパティイニシャライザの構文をES6クラスで使用するとよい反復パターン

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}/> 
    ... 
    ); 
    } 
} 

ここES2016の構文を使用して、同じリファクタリングコンポーネントです:

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}/> 
    ... 
    ); 
    } 
} 

答えて

4

は、はい、それを使用することは非常に良い習慣です。 プロパティ初期化子があなたに代わってバインドを手動で行う理由はありません。コードははるかにクリーンであり、他の1行の命令でコードを散らすことはありません。

+0

現在のところ、あまり人気がありませんが、実際にはまだ見ていません。そして、私はそれが生産コードで使用することを推奨しないと思います。 –

+0

@TarasYaremkivこれは、毎日ここに掲載される例がたくさんあります。プロダクションでの使用を推奨しないのはなぜですか? –

+0

私はES7はES6ほど広くサポートされていないと思います。実際にWebpackでこれを使うために必要なのは、npmをインストールしてbabel-preset-es2016をインストールし、baber.rcを "presets"に変更することです:["es2016"]? –

関連する問題