Как преобразовать компонент без состояния React в обычный JS?

#reactjs

Вопрос:

Мне сказали, что следующий компонент без состояния react:

({value}) => <li>{value}</li>

десугаризует в

(props) => { var value = props.value; return <li>{value}</li> } .

Я не совсем понимаю логику, стоящую за этим сахаром. (x) => x это лямбда-выражение, которое я понимаю. Но чего я не понимаю: что {value} делает? Я предполагаю, что он извлекает текущее значение value из props того, что находится в области видимости.

Это (props) => { var value = props.value; return <li>{value}</li> } закрытие? Он закрывается props.value ?

Когда я перехожу ({value}) => <li>{value}</li> к другой функции / компоненту, то на что будет value ссылаться?

Вопрос возникает отсюда.

РЕДАКТИРОВАТЬ: это напоминает мне отражение, я имею в виду, что если бы вы написали что-то подобное на Java, вам нужно было бы использовать отражение… правильно? — это разумная аналогия?

ПРАВКА2:

Согласно

{value}

;
» rel=»nofollow»>babel let MyComponent = ({ value }) => <li>{value}</li>; desugars для :

 "use strict";

var MyComponent = function MyComponent(_ref) {
  var value = _ref.value;
  return React.createElement(
    "li",
    null,
    value
  );
};

1. Это {value} деструктурирование объекта, и вы правы, оно удаляет value поле из props объекта.

2. я думаю, правильнее сказать, что это удаление value объекта, передаваемого функции. просто так получилось, что этот объект props , из-за того, как эта функция используется в react

Ответ №1:

Это форма деструктурирующего присваивания. Более конкретно, его форма называется «извлечение полей из объектов, переданных в качестве параметра функции» в MDN.

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

 ({value}) => { console.log(value) }

действительно ли это означает, что

 (params) => { console.log(params.value) }

действительно ли desugares для

1. я думаю, что реакция сахара происходит, когда он превращается value в {value} , чего не происходит при обычном разрушении. я сам никогда не использовал этот сахар, но я предполагаю, что это что-то JSX делает

2. @Brandon Нет, это чисто собственное назначение деструктурирования ES2015, ничего специфичного для JSX. developer.mozilla.org/en/docs/Web/JavaScript/Reference /…

3. в вашем фрагменте, да, но ОП спросил о синтаксисе, который расширился на (props) => { var value = props.value; return <li>{value}</li> } . брекетинг value — это не то, что делает ES2015, поэтому я предполагаю, что это JSX. чистый ES2015 разрешит (props) => { var value = props.value; return <li>value</li> } , что не вернет действительный JSX

4. Ну, конечно return <li>{value}</li> , часть — это JSX. Но суть вопроса не в этом. Но ({value}) часть есть, и это чистый ES2015.

5. из OP: » Но чего я не понимаю: что делает {value} ?»