Make ReactElement really a plain object

This should guarantee that the hidden class is the same after inlining.

Author: sophiebits

src/isomorphic/classic/element/ReactElement.js

@@ -14,66 +14,17 @@
 var ReactCurrentOwner = require('ReactCurrentOwner');
 
 var assign = require('Object.assign');
-var warning = require('warning');
 
 var RESERVED_PROPS = {
   key: true,
   ref: true,
 };
 
-/**
- * Warn for mutations.
- *
- * @internal
- * @param {object} object
- * @param {string} key
- */
-function defineWarningProperty(object, key) {
-  Object.defineProperty(object, key, {
-
-    configurable: false,
-    enumerable: true,
-
-    get: function() {
-      if (!this._store) {
-        return null;
-      }
-      return this._store[key];
-    },
-
-    set: function(value) {
-      warning(
-        false,
-        'Don\'t set the %s property of the React element. Instead, ' +
-        'specify the correct value when initially creating the element.',
-        key
-      );
-      this._store[key] = value;
-    },
-
-  });
-}
-
-/**
- * This is updated to true if the membrane is successfully created.
- */
-var useMutationMembrane = false;
-
-/**
- * Warn for mutations.
- *
- * @internal
- * @param {object} element
- */
-function defineMutationMembrane(prototype) {
+var canDefineProperty = false;
+if (__DEV__) {
   try {
-    var pseudoFrozenProperties = {
-      props: true,
-    };
-    for (var key in pseudoFrozenProperties) {
-      defineWarningProperty(prototype, key);
-    }
-    useMutationMembrane = true;
+    Object.defineProperty({}, 'x', {});
+    canDefineProperty = true;
   } catch (x) {
     // IE will fail on defineProperty
   }
@@ -91,57 +42,46 @@ function defineMutationMembrane(prototype) {
  * @internal
  */
 var ReactElement = function(type, key, ref, owner, props) {
-  // Built-in properties that belong on the element
-  this.type = type;
-  this.key = key;
-  this.ref = ref;
+  var element = {
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: ref,
 
-  // Record the component responsible for creating this element.
-  this._owner = owner;
+    // Record the component responsible for creating this element.
+    _owner: owner,
+
+    props: props,
+
+    _isReactElement: true
+  };
 
   if (__DEV__) {
     // The validation flag and props are currently mutative. We put them on
     // an external backing store so that we can freeze the whole object.
     // This can be replaced with a WeakMap once they are implemented in
     // commonly used development environments.
-    this._store = {props: props, originalProps: assign({}, props)};
+    element._store = {originalProps: assign({}, props)};
 
     // To make comparing ReactElements easier for testing purposes, we make
     // the validation flag non-enumerable (where possible, which should
     // include every environment we run tests in), so the test framework
     // ignores it.
-    try {
-      Object.defineProperty(this._store, 'validated', {
+    if (canDefineProperty) {
+      Object.defineProperty(element._store, 'validated', {
         configurable: false,
         enumerable: false,
         writable: true,
       });
-    } catch (x) {
-    }
-    this._store.validated = false;
-
-    // We're not allowed to set props directly on the object so we early
-    // return and rely on the prototype membrane to forward to the backing
-    // store.
-    if (useMutationMembrane) {
-      Object.freeze(this);
-      return;
     }
-  }
+    element._store.validated = false;
 
-  this.props = props;
-};
+    Object.freeze(element);
+  }
 
-// We intentionally don't expose the function on the constructor property.
-// ReactElement should be indistinguishable from a plain object.
-ReactElement.prototype = {
-  _isReactElement: true,
+  return element;
 };
 
-if (__DEV__) {
-  defineMutationMembrane(ReactElement.prototype);
-}
-
 ReactElement.createElement = function(type, config, children) {
   var propName;
 
@@ -186,7 +126,7 @@ ReactElement.createElement = function(type, config, children) {
     }
   }
 
-  return new ReactElement(
+  return ReactElement(
     type,
     key,
     ref,
@@ -207,7 +147,7 @@ ReactElement.createFactory = function(type) {
 };
 
 ReactElement.cloneAndReplaceProps = function(oldElement, newProps) {
-  var newElement = new ReactElement(
+  var newElement = ReactElement(
     oldElement.type,
     oldElement.key,
     oldElement.ref,
@@ -266,7 +206,7 @@ ReactElement.cloneElement = function(element, config, children) {
     props.children = childArray;
   }
 
-  return new ReactElement(
+  return ReactElement(
     element.type,
     key,
     ref,

src/isomorphic/classic/element/ReactElementValidator.js

@@ -206,7 +206,9 @@ function validateChildKeys(node, parentType) {
     }
   } else if (ReactElement.isValidElement(node)) {
     // This element was passed in a valid location.
-    node._store.validated = true;
+    if (node._store) {
+      node._store.validated = true;
+    }
   } else if (node) {
     var iteratorFn = getIteratorFn(node);
     // Entry iterators provide implicit keys.