ES6 и ES8 синтаксис в React компонент

Question

Я новичок в ES6 с React, и увидеть этот необъяснимый код компонента:

componentWillUnmount() { 
     base.removeBinding(this.ref); 
     this.unsubscribe(); 
    } 

    // ES6 syntax 
    handleToggle(event, toggled){ 
     this.setState({ 
      [event.target.name]: toggled, 
     }); 
    }; 

    // possible ES8 syntax 
    handleToggle = (event, toggled) => { 
     this.setState({ 
      [event.target.name]: toggled, 
     }); 
    }; 

второй метод сбивает с толку меня, что именно происходит с помощью метода handleToggle? Есть ли эквивалент ES5?

Мое предположение, что эквивалентно ES5 является:

componentWillUnmount: function() { 
     base.removeBinding(this.ref); 
     this.unsubscribe(); 
    } 

    handleToggle: (event, toggled) => { 
     this.setState({ 
      [event.target.name]: toggled, 
     }); 
    }; 

... проблема/запутанной части со вторым способом, является то, что «это» в методе handleToggle будет связан с неправильным значением (lexical scope 'this' value) ... так ли этот синтаксис даже действителен здесь?

Что происходит? Это код в чужой библиотеке, который я хочу понять.

Answer 1

Функция handleToggle здесь использует функцию стрелок

handleToggle = (event, toggled) => { 
    this.setState({ 
     [event.target.name]: toggled, 
    }); 
}; 

Он принимает два аргумента event, toggled и то, что после => является телом функции. Одной из специальностей функций стрелок является то же, что и обязательное действие.

ES5 эквивалент вышеуказанной функции будет

handleToggle: function(event, toggled){ 
    this.setState({ 
     [event.target.name]: toggled, 
    }); 
}; 

при вызове этой функции вам необходимо будет связать его явно как this.handleToggle.bind(this, value)

Answer 2

, что именно происходит с помощью метода handleToggle?

Это новая функция, которая представляет собой proposal под названием public class fields. В настоящее время синтаксис класса ES6 обеспечивает синтаксическую поддержку для определения общих методов, но не для методов/свойств. Эти предложения расширяют синтаксис класса для поддержки этого.

Вот простой пример:

class Foo { 
    bar = 42; 
} 

эквивалентно

class Foo { 
    constructor() { 
    this.bar = 42; 
    } 
} 

Т.е. эти свойства оцениваются так, как будто они назначаются this внутри конструктора.

Следовательно ваш пример эквивалентен

class Component extends React.Component { 
    constructor() 
    this.handleToggle = (event, toggled) => { 
     this.setState({ 
      [event.target.name]: toggled, 
     }); 
    }; 
    } 
} 

В связи с характером функций стрелок, это создает «связанный» методы экземпляра и, таким образом, могут быть переданы в другие функции, не теряя значение this.

так ли этот синтаксис даже здесь?

Официальная версия ECMAScript не содержит этой функции, поэтому, строго говоря, ответ должен быть: no. Тем не менее, он находится на стандартном треке, поэтому он, скорее всего, будет частью ES2018.

В то же время его можно использовать это предложение в своем собственном коде, используя Babel (который должен использоваться для React) в любом случае с transform-class-properties plugin.