React의 Stateless Component를 일반 JS로 변환하는 방법은 무엇입니까?

Question

나는 react stateless component를 다음과 같은 말을 들었다 :

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

desugars을

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

나는이 설탕 뒤에있는 논리를 정말로 이해하지 못한다. (x) => x은 람다 식으로 이해합니다. 그러나 내가 이해할 수없는 것은 : {value}은 무엇을하고 있는가? 내 생각 엔 범위에있는 props에서 현재 값 value을 추출합니다.

(props) => { var value = props.value; return <li>{value}</li> }은 종결입니까? props.value 이상으로 끝나나요?

({value}) => <li>{value}</li>을 다른 함수/구성 요소에 전달하면 value은 무엇을 의미합니까?

질문의 출처는 here입니다.

EDIT : 이것은 반사를 상기시킵니다. 내 말은, 당신이 자바에서 이런 식으로 글을 쓰고 싶다면 반사를 사용해야한다는 것입니다 ... 맞습니까? - 그건 합리적인 비유인가?

EDIT2 님 babellet MyComponent = ({ value }) => <li>{value}</li>; desugars 따르면

:

"use strict"; 

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

Answer 1

이것은 destructuring assignment의 형태이다. 좀 더 구체적으로 MDN에서 "함수 매개 변수로 전달 된 객체에서 필드 가져 오기"라는 형식입니다.

이 구조화 형식에서 함수는 매개 변수로 전달 된 개체에서 필요한 필드를 가져옵니다. 그래서

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

이 참으로 함수가 실제로

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

로되어 desugares