javascript - 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

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

props 是使用 Object.defineProperty 创建的这使您能够设置 writable: false 然后用 Object.freeze 将其“卡住” :

The Object.freeze() method freezes an object: that is, prevents new properties from being added to it; prevents existing properties from being removed; and prevents existing properties, or their enumerability, configurability, or writability, from being changed. The method returns the object in a frozen state.

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