CODEWITHSUNDEEP
reactjs
jhegedus
jhegedus

Reputation: 20653

How to transform React's Stateless Component to plain JS?

I was told that the following react stateless component:

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

desugars to

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

I don't really understand the logic behind this sugar. (x) => x is a lambda expression, that I understand. But what I don't understand is : what is {value} doing ? My guess is that it extracts the current value of value from the props which is in scope.

Is (props) => { var value = props.value; return <li>{value}</li> } a closure ? Does it close over props.value ?

When I pass ({value}) => <li>{value}</li> to another function/component, then what will value refer to ?

The question originates from here.

EDIT: this reminds me of reflection, what I mean is, if you were to write something like this in Java then you would need to use reflection... right? - is that a reasonable analogy?

EDIT2:

According to babel let MyComponent = ({ value }) => <li>{value}</li>; desugars to :

"use strict";

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

Upvotes: 1

Views: 89

Answers (1)

dfsq
dfsq

Reputation: 193301

This is the form of destructuring assignment. More specifically the form of it called "Pulling fields from objects passed as function parameter" on MDN.

In this form of descructuring, function pulls necessary fields from the object passed as a parameter. So the function

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

is indeed desugares into

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

is indeed desugares to

Upvotes: 2

Related Questions