React js 如何保证 props 的不变性？

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

对我来说它看起来像普通的js。

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

当它运行到该断点时，我进入 chrome 的控制台并执行了以下操作：

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

看来我真的无法更改名为 props 的变量的属性。

但是 props 对象看起来像是一个无辜的对象，这在 React js 中是如何实现的呢？

Answer 1

源代码

// 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);
}

它们props是使用Object.defineProperty创建的，它使您能够设置writable: false然后使用Object.freeze “冻结”它：

Object.freeze() 方法冻结对象：即阻止向其添加新属性；防止现有属性被删除；并防止现有属性或其可枚举性、可配置性或可写性被更改。该方法返回处于冻结状态的对象。

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