反应js如何确保道具的不变性？

Question

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara"/>;

我在jsx中有这个。

它汇编到这个js：

function Welcome(props) {
  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
    "h1",
    {
      __source: {
        fileName: _jsxFileName,
        lineNumber: 7
      },
      __self: this
    },
    "Hello, ",
    props.name
  );
}

var element = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(Welcome, { name: "Sara", __source: {
    fileName: _jsxFileName,
    lineNumber: 10
  },
  __self: this
});

对我来说，这看起来很正常。

所以我在Chrome中设置了一个断点。

当它跑到那个断点时，我去了chrome的控制台并做了这个：

这三个表达式被输入控制台并在断点开启时执行。

好像我真的无法改变名为props的变量的属性。

但道具对象看起来像一个无辜的对象，这是如何在反应中实现的？

Answer 1

source code

// Two elements created in two different places should be considered
// equal for testing purposes and therefore we hide it from enumeration.
Object.defineProperty(element, '_source', {
  configurable: false,
  enumerable: false,
  writable: false,
  value: source,
});
if (Object.freeze) {
  Object.freeze(element.props);
  Object.freeze(element);
}

使用Object.defineProperty创建props，这样您就可以设置writable: false，然后＆＃34;冻结＆＃34;它与Object.freeze：

  

Object.freeze（）方法冻结一个对象：即阻止new   属性被添加到它;防止现有属性   被删除;并防止现有的属性，或他们的   可更改性，可配置性或可写性。   该方法以冻结状态返回对象。

JSFiddle简要示例（在运行之前打开控制台）：https://jsfiddle.net/rttw629v/