2017-02-22 4 views
4

Я просмотрел урок о [Use ES2016 Property Initializer Syntax in ES6 classes] на egghead.io, и я не совсем уверен - это хорошая практика его использования. Вот обычный Stateful Реагировать компонент из верхней упомянутого урока:Это хороший шаблон React для использования 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

Да, это очень хорошая практика, чтобы использовать его. Нет причин вручную выполнять привязку, когда инициализатор свойств сделает это за вас: код намного чище, и вы не разбрасываете код с помощью других команд одной строки.

+0

Но в настоящее время он не очень популярен, на самом деле я его еще не видел. И я полагаю, что это не рекомендуется использовать в производственном коде –

+0

@TarasYaremkiv Это много примеров, которые публикуются здесь каждый день. Почему это не рекомендуется использовать в производстве? –

+0

Я думаю, потому что ES7 не так широко поддерживается сегодня, как ES6. На самом деле все, что мне нужно сделать, чтобы использовать это в Webpack, - это npm install --save-dev babel-preset-es2016 и изменить baber.rc на «пресеты»: ["es2016"]? –

Смежные вопросы