リアクションのステートレスコンポーネントをプレーン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：あなたはJavaでこのような何かを書くとしたら、これは反射のことを思い出す、私が何を意味するかで、その後、あなたは右...リフレクションを使用する必要があるでしょうか？それは妥当なアナロジーですか？

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上の「関数パラメータとして渡されたオブジェクトからのフィールドの引き出し」という形式です。 descructuringのこの形態で

、関数は、パラメータとして渡されたオブジェクトから必要なフィールドを引っ張ります。だから、

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

は確かにある機能は確かに

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

にされdesugares