Question

我被告知以下react stateless component：

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

desugars to

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

我真的不明白这种糖背后的逻辑。我理解(x) => x是一个lambda表达式。但我不明白的是：{value}在做什么？我的猜测是，它从范围内的value中提取props的当前值。

(props) => { var value = props.value; return <li>{value}</li> }关闭了吗？它是否靠近props.value？

当我将({value}) => <li>{value}</li>传递给另一个函数/组件时，value会引用什么？

问题来自here。

编辑：这让我想起了反思，我的意思是，如果你用Java写这样的东西，那么你需要使用反射......对吗？ - 这是一个合理的比喻吗？

EDIT2：

根据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
  );
};

Answer 1

这是destructuring assignment的形式。更具体地说，它的形式称为＆＃34;从作为函数参数传递的对象中拉出字段＆＃34;在MDN上。

在这种形式的descructuring中，函数从作为参数传递的对象中提取必要的字段。所以功能

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

确实令人沮丧

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

确实令人厌恶

如何将React的无状态组件转换为普通JS？

1 个答案: