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 which gives you and ability to set writable: false and then "freezing" it with 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/

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

How does react js ensure immutability of props?

javascript

immutability

reactjs