react 0.13.0-alpha.2 → 0.13.0-rc2

package/lib/ReactComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013-2014, Facebook, Inc.
+ * Copyright 2013-2015, Facebook, Inc.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -11,188 +11,121 @@
 
 'use strict';
 
-var ReactElementValidator = require("./ReactElementValidator");
-var ReactOwner = require("./ReactOwner");
-var ReactRef = require("./ReactRef");
+var ReactUpdateQueue = require("./ReactUpdateQueue");
 
 var invariant = require("./invariant");
+var warning = require("./warning");
 
-function attachRef(ref, component, owner) {
-  if (ref instanceof ReactRef) {
-    ReactRef.attachRef(ref, component);
-  } else {
-    ReactOwner.addComponentAsRefTo(component, ref, owner);
-  }
-}
-
-function detachRef(ref, component, owner) {
-  if (ref instanceof ReactRef) {
-    ReactRef.detachRef(ref, component);
-  } else {
-    ReactOwner.removeComponentAsRefFrom(component, ref, owner);
-  }
+/**
+ * Base class helpers for the updating state of a component.
+ */
+function ReactComponent(props, context) {
+  this.props = props;
+  this.context = context;
 }
 
 /**
- * Components are the basic units of composition in React.
+ * Sets a subset of the state. Always use this to mutate
+ * state. You should treat `this.state` as immutable.
  *
- * Every component accepts a set of keyed input parameters known as "props" that
- * are initialized by the constructor. Once a component is mounted, the props
- * can be mutated using `setProps` or `replaceProps`.
+ * There is no guarantee that `this.state` will be immediately updated, so
+ * accessing `this.state` after calling this method may return the old value.
  *
- * Every component is capable of the following operations:
+ * There is no guarantee that calls to `setState` will run synchronously,
+ * as they may eventually be batched together.  You can provide an optional
+ * callback that will be executed when the call to setState is actually
+ * completed.
  *
- *   `mountComponent`
- *     Initializes the component, renders markup, and registers event listeners.
+ * When a function is provided to setState, it will be called at some point in
+ * the future (not synchronously). It will be called with the up to date
+ * component arguments (state, props, context). These values can be different
+ * from this.* because your function may be called after receiveProps but before
+ * shouldComponentUpdate, and this new state, props, and context will not yet be
+ * assigned to this.
  *
- *   `receiveComponent`
- *     Updates the rendered DOM nodes to match the given component.
+ * @param {object|function} partialState Next partial state or function to
+ *        produce next partial state to be merged with current state.
+ * @param {?function} callback Called after state is updated.
+ * @final
+ * @protected
+ */
+ReactComponent.prototype.setState = function(partialState, callback) {
+  ("production" !== process.env.NODE_ENV ? invariant(
+    typeof partialState === 'object' ||
+    typeof partialState === 'function' ||
+    partialState == null,
+    'setState(...): takes an object of state variables to update or a ' +
+    'function which returns an object of state variables.'
+  ) : invariant(typeof partialState === 'object' ||
+  typeof partialState === 'function' ||
+  partialState == null));
+  if ("production" !== process.env.NODE_ENV) {
+    ("production" !== process.env.NODE_ENV ? warning(
+      partialState != null,
+      'setState(...): You passed an undefined or null state object; ' +
+      'instead, use forceUpdate().'
+    ) : null);
+  }
+  ReactUpdateQueue.enqueueSetState(this, partialState);
+  if (callback) {
+    ReactUpdateQueue.enqueueCallback(this, callback);
+  }
+};
+
+/**
+ * Forces an update. This should only be invoked when it is known with
+ * certainty that we are **not** in a DOM transaction.
  *
- *   `unmountComponent`
- *     Releases any resources allocated by this component.
+ * You may want to call this when you know that some deeper aspect of the
+ * component's state has changed but `setState` was not called.
  *
- * Components can also be "owned" by other components. Being owned by another
- * component means being constructed by that component. This is different from
- * being the child of a component, which means having a DOM representation that
- * is a child of the DOM representation of that component.
+ * This will not invoke `shouldUpdateComponent`, but it will invoke
+ * `componentWillUpdate` and `componentDidUpdate`.
  *
- * @class ReactComponent
+ * @param {?function} callback Called after update is complete.
+ * @final
+ * @protected
  */
-var ReactComponent = {
-
-  /**
-   * Injected module that provides ability to mutate individual properties.
-   * Injected into the base class because many different subclasses need access
-   * to this.
-   *
-   * @internal
-   */
-  BackendIDOperations: null,
-
-  /**
-   * Base functionality for every ReactComponent constructor. Mixed into the
-   * `ReactComponent` prototype, but exposed statically for easy access.
-   *
-   * @lends {ReactComponent.prototype}
-   */
-  Mixin: {
-
-    /**
-     * Base constructor for all React components.
-     *
-     * Subclasses that override this method should make sure to invoke
-     * `ReactComponent.Mixin.construct.call(this, ...)`.
-     *
-     * @param {ReactElement} element
-     * @internal
-     */
-    construct: function(element) {
-      // We keep the old element and a reference to the pending element
-      // to track updates.
-      this._currentElement = element;
-      // These two fields are used by the DOM and ART diffing algorithms
-      // respectively. Instead of using expandos on components, we should be
-      // storing the state needed by the diffing algorithms elsewhere.
-      this._mountIndex = 0;
-      this._mountImage = null;
-    },
-
-    /**
-     * Initializes the component, renders markup, and registers event listeners.
-     *
-     * NOTE: This does not insert any nodes into the DOM.
-     *
-     * Subclasses that override this method should make sure to invoke
-     * `ReactComponent.Mixin.mountComponent.call(this, ...)`.
-     *
-     * @param {string} rootID DOM ID of the root node.
-     * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
-     * @return {?string} Rendered markup to be inserted into the DOM.
-     * @internal
-     */
-    mountComponent: function(rootID, transaction, context) {
-      if ("production" !== process.env.NODE_ENV) {
-        ReactElementValidator.checkAndWarnForMutatedProps(this._currentElement);
-      }
-
-      var ref = this._currentElement.ref;
-      if (ref != null) {
-        var owner = this._currentElement._owner;
-        attachRef(ref, this, owner);
-      }
-      // Effectively: return '';
-    },
-
-    /**
-     * Releases any resources allocated by `mountComponent`.
-     *
-     * NOTE: This does not remove any nodes from the DOM.
-     *
-     * Subclasses that override this method should make sure to invoke
-     * `ReactComponent.Mixin.unmountComponent.call(this)`.
-     *
-     * @internal
-     */
-    unmountComponent: function() {
-      var ref = this._currentElement.ref;
-      if (ref != null) {
-        detachRef(ref, this, this._currentElement._owner);
-      }
-    },
-
-    /**
-     * Updates the component's currently mounted representation.
-     *
-     * @param {ReactReconcileTransaction} transaction
-     * @param {object} prevElement
-     * @param {object} nextElement
-     * @internal
-     */
-    updateComponent: function(transaction, prevElement, nextElement, context) {
-      if ("production" !== process.env.NODE_ENV) {
-        ReactElementValidator.checkAndWarnForMutatedProps(nextElement);
-      }
-
-      // If either the owner or a `ref` has changed, make sure the newest owner
-      // has stored a reference to `this`, and the previous owner (if different)
-      // has forgotten the reference to `this`. We use the element instead
-      // of the public this.props because the post processing cannot determine
-      // a ref. The ref conceptually lives on the element.
-
-      // TODO: Should this even be possible? The owner cannot change because
-      // it's forbidden by shouldUpdateReactComponent. The ref can change
-      // if you swap the keys of but not the refs. Reconsider where this check
-      // is made. It probably belongs where the key checking and
-      // instantiateReactComponent is done.
+ReactComponent.prototype.forceUpdate = function(callback) {
+  ReactUpdateQueue.enqueueForceUpdate(this);
+  if (callback) {
+    ReactUpdateQueue.enqueueCallback(this, callback);
+  }
+};
 
-      if (nextElement._owner !== prevElement._owner ||
-          nextElement.ref !== prevElement.ref) {
-        if (prevElement.ref != null) {
-          detachRef(prevElement.ref, this, prevElement._owner);
-        }
-        // Correct, even if the owner is the same, and only the ref has changed.
-        if (nextElement.ref != null) {
-          attachRef(nextElement.ref, this, nextElement._owner);
+/**
+ * Deprecated APIs. These APIs used to exist on classic React classes but since
+ * we would like to deprecate them, we're not going to move them over to this
+ * modern base class. Instead, we define a getter that warns if it's accessed.
+ */
+if ("production" !== process.env.NODE_ENV) {
+  var deprecatedAPIs = {
+    getDOMNode: 'getDOMNode',
+    isMounted: 'isMounted',
+    replaceState: 'replaceState',
+    setProps: 'setProps'
+  };
+  var defineDeprecationWarning = function(methodName, displayName) {
+    try {
+      Object.defineProperty(ReactComponent.prototype, methodName, {
+        get: function() {
+          ("production" !== process.env.NODE_ENV ? warning(
+            false,
+            '%s(...) is deprecated in plain JavaScript React classes.',
+            displayName
+          ) : null);
+          return undefined;
         }
-      }
-    },
-
-    /**
-     * Get the publicly accessible representation of this component - i.e. what
-     * is exposed by refs and returned by React.render. Can be null for
-     * stateless components.
-     *
-     * @return {?ReactComponent} the actual sibling Component.
-     * @internal
-     */
-    getPublicInstance: function() {
-      ("production" !== process.env.NODE_ENV ? invariant(
-        false,
-        'getPublicInstance should never be called on the base class. It must ' +
-        'be overridden.'
-      ) : invariant(false));
+      });
+    } catch (x) {
+      // IE will fail on defineProperty (es5-shim/sham too)
+    }
+  };
+  for (var fnName in deprecatedAPIs) {
+    if (deprecatedAPIs.hasOwnProperty(fnName)) {
+      defineDeprecationWarning(fnName, deprecatedAPIs[fnName]);
     }
   }
-};
+}
 
 module.exports = ReactComponent;

package/lib/ReactComponentBrowserEnvironment.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013-2014, Facebook, Inc.
+ * Copyright 2013-2015, Facebook, Inc.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the

package/lib/ReactComponentEnvironment.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2014, Facebook, Inc.
+ * Copyright 2014-2015, Facebook, Inc.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the

package/lib/ReactComponentWithPureRenderMixin.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013-2014, Facebook, Inc.
+ * Copyright 2013-2015, Facebook, Inc.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the

package/lib/ReactCompositeComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013-2014, Facebook, Inc.
+ * Copyright 2013-2015, Facebook, Inc.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -11,21 +11,23 @@
 
 'use strict';
 
-var ReactComponent = require("./ReactComponent");
 var ReactComponentEnvironment = require("./ReactComponentEnvironment");
 var ReactContext = require("./ReactContext");
 var ReactCurrentOwner = require("./ReactCurrentOwner");
 var ReactElement = require("./ReactElement");
+var ReactElementValidator = require("./ReactElementValidator");
 var ReactInstanceMap = require("./ReactInstanceMap");
+var ReactLifeCycle = require("./ReactLifeCycle");
+var ReactNativeComponent = require("./ReactNativeComponent");
 var ReactPerf = require("./ReactPerf");
 var ReactPropTypeLocations = require("./ReactPropTypeLocations");
 var ReactPropTypeLocationNames = require("./ReactPropTypeLocationNames");
+var ReactReconciler = require("./ReactReconciler");
 var ReactUpdates = require("./ReactUpdates");
 
 var assign = require("./Object.assign");
 var emptyObject = require("./emptyObject");
 var invariant = require("./invariant");
-var keyMirror = require("./keyMirror");
 var shouldUpdateReactComponent = require("./shouldUpdateReactComponent");
 var warning = require("./warning");
 
@@ -40,63 +42,32 @@ function getDeclarationErrorAddendum(component) {
   return '';
 }
 
-function validateLifeCycleOnReplaceState(instance) {
-  var compositeLifeCycleState = instance._compositeLifeCycleState;
-  ("production" !== process.env.NODE_ENV ? invariant(
-    ReactCurrentOwner.current == null,
-    'replaceState(...): Cannot update during an existing state transition ' +
-    '(such as within `render`). Render methods should be a pure function ' +
-    'of props and state.'
-  ) : invariant(ReactCurrentOwner.current == null));
-  ("production" !== process.env.NODE_ENV ? invariant(compositeLifeCycleState !== CompositeLifeCycle.UNMOUNTING,
-    'replaceState(...): Cannot update while unmounting component. This ' +
-    'usually means you called setState() on an unmounted component.'
-  ) : invariant(compositeLifeCycleState !== CompositeLifeCycle.UNMOUNTING));
-}
-
 /**
- * `ReactCompositeComponent` maintains an auxiliary life cycle state in
- * `this._compositeLifeCycleState` (which can be null).
+ * ------------------ The Life-Cycle of a Composite Component ------------------
  *
- * This is different from the life cycle state maintained by `ReactComponent`.
- * The following diagram shows how the states overlap in
- * time. There are times when the CompositeLifeCycle is null - at those times it
- * is only meaningful to look at ComponentLifeCycle alone.
+ * - constructor: Initialization of state. The instance is now retained.
+ *   - componentWillMount
+ *   - render
+ *   - [children's constructors]
+ *     - [children's componentWillMount and render]
+ *     - [children's componentDidMount]
+ *     - componentDidMount
  *
- * Top Row: ReactComponent.ComponentLifeCycle
- * Low Row: ReactComponent.CompositeLifeCycle
+ *       Update Phases:
+ *       - componentWillReceiveProps (only called if parent updated)
+ *       - shouldComponentUpdate
+ *         - componentWillUpdate
+ *           - render
+ *           - [children's constructors or receive props phases]
+ *         - componentDidUpdate
  *
- * +-------+---------------------------------+--------+
- * |  UN   |             MOUNTED             |   UN   |
- * |MOUNTED|                                 | MOUNTED|
- * +-------+---------------------------------+--------+
- * |       ^--------+   +-------+   +--------^        |
- * |       |        |   |       |   |        |        |
- * |    0--|MOUNTING|-0-|RECEIVE|-0-|   UN   |--->0   |
- * |       |        |   |PROPS  |   |MOUNTING|        |
- * |       |        |   |       |   |        |        |
- * |       |        |   |       |   |        |        |
- * |       +--------+   +-------+   +--------+        |
- * |       |                                 |        |
- * +-------+---------------------------------+--------+
+ *     - componentWillUnmount
+ *     - [children's componentWillUnmount]
+ *   - [children destroyed]
+ * - (destroyed): The instance is now blank, released by React and ready for GC.
+ *
+ * -----------------------------------------------------------------------------
  */
-var CompositeLifeCycle = keyMirror({
-  /**
-   * Components in the process of being mounted respond to state changes
-   * differently.
-   */
-  MOUNTING: null,
-  /**
-   * Components in the process of being unmounted are guarded against state
-   * changes.
-   */
-  UNMOUNTING: null,
-  /**
-   * Components that are mounted and receiving new props respond to state
-   * changes differently.
-   */
-  RECEIVING_PROPS: null
-});
 
 /**
  * An incrementing ID assigned to each component when it is mounted. This is
@@ -109,8 +80,7 @@ var nextMountID = 1;
 /**
  * @lends {ReactCompositeComponent.prototype}
  */
-var ReactCompositeComponentMixin = assign({},
-  ReactComponent.Mixin, {
+var ReactCompositeComponentMixin = {
 
   /**
    * Base constructor for all composite component.
@@ -120,42 +90,26 @@ var ReactCompositeComponentMixin = assign({},
    * @internal
    */
   construct: function(element) {
+    this._currentElement = element;
     this._rootNodeID = null;
+    this._instance = null;
 
-    this._instance.props = element.props;
-    this._instance.state = null;
-    this._instance.context = null;
-    this._instance.refs = emptyObject;
-
+    // See ReactUpdateQueue
     this._pendingElement = null;
-    this._pendingContext = null;
-    this._pendingState = null;
+    this._pendingStateQueue = null;
+    this._pendingReplaceState = false;
     this._pendingForceUpdate = false;
-    this._compositeLifeCycleState = null;
 
     this._renderedComponent = null;
 
-    // Children can be either an array or more than one argument
-    ReactComponent.Mixin.construct.apply(this, arguments);
-
     this._context = null;
     this._mountOrder = 0;
     this._isTopLevel = false;
 
-    // See ReactUpdates.
+    // See ReactUpdates and ReactUpdateQueue.
     this._pendingCallbacks = null;
   },
 
-  /**
-   * Checks whether or not this composite component is mounted.
-   * @return {boolean} True if mounted, false otherwise.
-   * @protected
-   * @final
-   */
-  isMounted: function() {
-    return this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING;
-  },
-
   /**
    * Initializes the component, renders markup, and registers event listeners.
    *
@@ -166,39 +120,35 @@ var ReactCompositeComponentMixin = assign({},
    * @internal
    */
   mountComponent: function(rootID, transaction, context) {
-    ReactComponent.Mixin.mountComponent.call(
-      this,
-      rootID,
-      transaction,
-      context
-    );
-
     this._context = context;
     this._mountOrder = nextMountID++;
     this._rootNodeID = rootID;
 
-    var inst = this._instance;
+    var publicProps = this._processProps(this._currentElement.props);
+    var publicContext = this._processContext(this._currentElement._context);
+
+    var Component = ReactNativeComponent.getComponentClassForElement(
+      this._currentElement
+    );
+
+    // Initialize the public class
+    var inst = new Component(publicProps, publicContext);
+    // These should be set up in the constructor, but as a convenience for
+    // simpler class abstractions, we set them up after the fact.
+    inst.props = publicProps;
+    inst.context = publicContext;
+    inst.refs = emptyObject;
+
+    this._instance = inst;
 
     // Store a reference from the instance back to the internal representation
     ReactInstanceMap.set(inst, this);
 
-    this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;
-
-    inst.context = this._processContext(this._currentElement._context);
     if ("production" !== process.env.NODE_ENV) {
       this._warnIfContextsDiffer(this._currentElement._context, context);
     }
-    inst.props = this._processProps(this._currentElement.props);
 
-    var initialState = inst.getInitialState ? inst.getInitialState() : null;
     if ("production" !== process.env.NODE_ENV) {
-      // We allow auto-mocks to proceed as if they're returning null.
-      if (typeof initialState === 'undefined' &&
-          inst.getInitialState._isMockFunction) {
-        // This is probably bad practice. Consider warning here and
-        // deprecating this convenience.
-        initialState = null;
-      }
       // Since plain JS classes are defined without any special initialization
       // logic, we can not catch common errors early. Therefore, we have to
       // catch them here, at initialization time, instead.
@@ -210,14 +160,6 @@ var ReactCompositeComponentMixin = assign({},
         'Did you mean to define a state property instead?',
         this.getName() || 'a component'
       ) : null);
-      ("production" !== process.env.NODE_ENV ? warning(
-        !inst.componentWillMount ||
-        inst.componentWillMount.isReactClassApproved,
-        'componentWillMount was defined on %s, a plain JavaScript class. ' +
-        'This is only supported for classes created using React.createClass. ' +
-        'Did you mean to define a constructor instead?',
-        this.getName() || 'a component'
-      ) : null);
       ("production" !== process.env.NODE_ENV ? warning(
         !inst.propTypes,
         'propTypes was defined as an instance property on %s. Use a static ' +
@@ -239,35 +181,47 @@ var ReactCompositeComponentMixin = assign({},
         (this.getName() || 'A component')
       ) : null);
     }
+
+    var initialState = inst.state;
+    if (initialState === undefined) {
+      inst.state = initialState = null;
+    }
     ("production" !== process.env.NODE_ENV ? invariant(
       typeof initialState === 'object' && !Array.isArray(initialState),
-      '%s.getInitialState(): must return an object or null',
+      '%s.state: must be set to an object or null',
       this.getName() || 'ReactCompositeComponent'
     ) : invariant(typeof initialState === 'object' && !Array.isArray(initialState)));
-    inst.state = initialState;
 
-    this._pendingState = null;
+    this._pendingStateQueue = null;
+    this._pendingReplaceState = false;
     this._pendingForceUpdate = false;
 
-    if (inst.componentWillMount) {
-      inst.componentWillMount();
-      // When mounting, calls to `setState` by `componentWillMount` will set
-      // `this._pendingState` without triggering a re-render.
-      if (this._pendingState) {
-        inst.state = this._pendingState;
-        this._pendingState = null;
+    var renderedElement;
+
+    var previouslyMounting = ReactLifeCycle.currentlyMountingInstance;
+    ReactLifeCycle.currentlyMountingInstance = this;
+    try {
+      if (inst.componentWillMount) {
+        inst.componentWillMount();
+        // When mounting, calls to `setState` by `componentWillMount` will set
+        // `this._pendingStateQueue` without triggering a re-render.
+        if (this._pendingStateQueue) {
+          inst.state = this._processPendingState(inst.props, inst.context);
+        }
       }
+
+      renderedElement = this._renderValidatedComponent();
+    } finally {
+      ReactLifeCycle.currentlyMountingInstance = previouslyMounting;
     }
 
-    var renderedElement = this._renderValidatedComponent();
     this._renderedComponent = this._instantiateReactComponent(
       renderedElement,
       this._currentElement.type // The wrapping type
     );
 
-    // Done with mounting, `setState` will now trigger UI changes.
-    this._compositeLifeCycleState = null;
-    var markup = this._renderedComponent.mountComponent(
+    var markup = ReactReconciler.mountComponent(
+      this._renderedComponent,
       rootID,
       transaction,
       this._processChildContext(context)
@@ -275,6 +229,7 @@ var ReactCompositeComponentMixin = assign({},
     if (inst.componentDidMount) {
       transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
     }
+
     return markup;
   },
 
@@ -287,25 +242,28 @@ var ReactCompositeComponentMixin = assign({},
   unmountComponent: function() {
     var inst = this._instance;
 
-    this._compositeLifeCycleState = CompositeLifeCycle.UNMOUNTING;
     if (inst.componentWillUnmount) {
-      inst.componentWillUnmount();
+      var previouslyUnmounting = ReactLifeCycle.currentlyUnmountingInstance;
+      ReactLifeCycle.currentlyUnmountingInstance = this;
+      try {
+        inst.componentWillUnmount();
+      } finally {
+        ReactLifeCycle.currentlyUnmountingInstance = previouslyUnmounting;
+      }
     }
-    this._compositeLifeCycleState = null;
 
-    this._renderedComponent.unmountComponent();
+    ReactReconciler.unmountComponent(this._renderedComponent);
     this._renderedComponent = null;
 
     // Reset pending fields
-    this._pendingState = null;
+    this._pendingStateQueue = null;
+    this._pendingReplaceState = false;
     this._pendingForceUpdate = false;
     this._pendingCallbacks = null;
     this._pendingElement = null;
 
-    ReactComponent.Mixin.unmountComponent.call(this);
-
-    ReactComponentEnvironment.unmountIDFromEnvironment(this._rootNodeID);
-
+    // These fields do not really need to be reset since this object is no
+    // longer accessible.
     this._context = null;
     this._rootNodeID = null;
 
@@ -321,50 +279,6 @@ var ReactCompositeComponentMixin = assign({},
     // TODO: inst.context = null;
   },
 
-  /**
-   * Sets a subset of the props.
-   *
-   * @param {object} partialProps Subset of the next props.
-   * @param {?function} callback Called after props are updated.
-   * @final
-   * @public
-   */
-  setProps: function(partialProps, callback) {
-    // Merge with the pending element if it exists, otherwise with existing
-    // element props.
-    var element = this._pendingElement || this._currentElement;
-    this.replaceProps(
-      assign({}, element.props, partialProps),
-      callback
-    );
-  },
-
-  /**
-   * Replaces all of the props.
-   *
-   * @param {object} props New props.
-   * @param {?function} callback Called after props are updated.
-   * @final
-   * @public
-   */
-  replaceProps: function(props, callback) {
-    ("production" !== process.env.NODE_ENV ? invariant(
-      this._isTopLevel,
-      'replaceProps(...): You called `setProps` or `replaceProps` on a ' +
-      'component with a parent. This is an anti-pattern since props will ' +
-      'get reactively updated when rendered. Instead, change the owner\'s ' +
-      '`render` method to pass the correct value as props to the component ' +
-      'where it is created.'
-    ) : invariant(this._isTopLevel));
-    // This is a deoptimized path. We optimize for always having an element.
-    // This creates an extra internal element.
-    this._pendingElement = ReactElement.cloneAndReplaceProps(
-      this._pendingElement || this._currentElement,
-      props
-    );
-    ReactUpdates.enqueueUpdate(this, callback);
-  },
-
   /**
    * Schedule a partial update to the props. Only used for internal testing.
    *
@@ -384,89 +298,22 @@ var ReactCompositeComponentMixin = assign({},
     ReactUpdates.enqueueUpdate(this, callback);
   },
 
-  /**
-   * Sets a subset of the state. This only exists because _pendingState is
-   * internal. This provides a merging strategy that is not available to deep
-   * properties which is confusing. TODO: Expose pendingState or don't use it
-   * during the merge.
-   *
-   * @param {object} partialState Next partial state to be merged with state.
-   * @param {?function} callback Called after state is updated.
-   * @final
-   * @protected
-   */
-  setState: function(partialState, callback) {
-    // Merge with `_pendingState` if it exists, otherwise with existing state.
-    this.replaceState(
-      assign({}, this._pendingState || this._instance.state, partialState),
-      callback
-    );
-  },
-
-  /**
-   * Replaces all of the state. Always use this or `setState` to mutate state.
-   * You should treat `this.state` as immutable.
-   *
-   * There is no guarantee that `this.state` will be immediately updated, so
-   * accessing `this.state` after calling this method may return the old value.
-   *
-   * @param {object} completeState Next state.
-   * @param {?function} callback Called after state is updated.
-   * @final
-   * @protected
-   */
-  replaceState: function(completeState, callback) {
-    validateLifeCycleOnReplaceState(this);
-    this._pendingState = completeState;
-    if (this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING) {
-      // If we're in a componentWillMount handler, don't enqueue a rerender
-      // because ReactUpdates assumes we're in a browser context (which is wrong
-      // for server rendering) and we're about to do a render anyway.
-      // TODO: The callback here is ignored when setState is called from
-      // componentWillMount. Either fix it or disallow doing so completely in
-      // favor of getInitialState.
-      ReactUpdates.enqueueUpdate(this, callback);
-    }
-  },
-
-  /**
-   * Forces an update. This should only be invoked when it is known with
-   * certainty that we are **not** in a DOM transaction.
-   *
-   * You may want to call this when you know that some deeper aspect of the
-   * component's state has changed but `setState` was not called.
-   *
-   * This will not invoke `shouldUpdateComponent`, but it will invoke
-   * `componentWillUpdate` and `componentDidUpdate`.
-   *
-   * @param {?function} callback Called after update is complete.isM
-   * @final
-   * @protected
-   */
-  forceUpdate: function(callback) {
-    var compositeLifeCycleState = this._compositeLifeCycleState;
-    ("production" !== process.env.NODE_ENV ? invariant(
-      compositeLifeCycleState !== CompositeLifeCycle.RECEIVING_STATE &&
-      compositeLifeCycleState !== CompositeLifeCycle.UNMOUNTING,
-      'forceUpdate(...): Cannot force an update while unmounting component ' +
-      'or during an existing state transition (such as within `render`).'
-    ) : invariant(compositeLifeCycleState !== CompositeLifeCycle.RECEIVING_STATE &&
-    compositeLifeCycleState !== CompositeLifeCycle.UNMOUNTING));
-    this._pendingForceUpdate = true;
-    ReactUpdates.enqueueUpdate(this, callback);
-  },
-
   /**
    * Filters the context object to only contain keys specified in
-   * `contextTypes`, and asserts that they are valid.
+   * `contextTypes`
    *
    * @param {object} context
    * @return {?object}
    * @private
    */
-  _processContext: function(context) {
+  _maskContext: function(context) {
     var maskedContext = null;
-    var contextTypes = this._instance.constructor.contextTypes;
+    // This really should be getting the component class for the element,
+    // but we know that we're not going to need it for built-ins.
+    if (typeof this._currentElement.type === 'string') {
+      return emptyObject;
+    }
+    var contextTypes = this._currentElement.type.contextTypes;
     if (!contextTypes) {
       return emptyObject;
     }
@@ -474,12 +321,30 @@ var ReactCompositeComponentMixin = assign({},
     for (var contextName in contextTypes) {
       maskedContext[contextName] = context[contextName];
     }
+    return maskedContext;
+  },
+
+  /**
+   * Filters the context object to only contain keys specified in
+   * `contextTypes`, and asserts that they are valid.
+   *
+   * @param {object} context
+   * @return {?object}
+   * @private
+   */
+  _processContext: function(context) {
+    var maskedContext = this._maskContext(context);
     if ("production" !== process.env.NODE_ENV) {
-      this._checkPropTypes(
-        contextTypes,
-        maskedContext,
-        ReactPropTypeLocations.context
+      var Component = ReactNativeComponent.getComponentClassForElement(
+        this._currentElement
       );
+      if (Component.contextTypes) {
+        this._checkPropTypes(
+          Component.contextTypes,
+          maskedContext,
+          ReactPropTypeLocations.context
+        );
+      }
     }
     return maskedContext;
   },
@@ -530,10 +395,15 @@ var ReactCompositeComponentMixin = assign({},
    */
   _processProps: function(newProps) {
     if ("production" !== process.env.NODE_ENV) {
-      var inst = this._instance;
-      var propTypes = inst.constructor.propTypes;
-      if (propTypes) {
-        this._checkPropTypes(propTypes, newProps, ReactPropTypeLocations.prop);
+      var Component = ReactNativeComponent.getComponentClassForElement(
+        this._currentElement
+      );
+      if (Component.propTypes) {
+        this._checkPropTypes(
+          Component.propTypes,
+          newProps,
+          ReactPropTypeLocations.prop
+        );
       }
     }
     return newProps;
@@ -574,74 +444,75 @@ var ReactCompositeComponentMixin = assign({},
           // React.render calls, so I'm abstracting it away into
           // a function to minimize refactoring in the future
           var addendum = getDeclarationErrorAddendum(this);
-          ("production" !== process.env.NODE_ENV ? warning(false, error.message + addendum) : null);
+
+          if (location === ReactPropTypeLocations.prop) {
+            // Preface gives us something to blacklist in warning module
+            ("production" !== process.env.NODE_ENV ? warning(
+              false,
+              'Failed Composite propType: %s%s',
+              error.message,
+              addendum
+            ) : null);
+          } else {
+            ("production" !== process.env.NODE_ENV ? warning(
+              false,
+              'Failed Context Types: %s%s',
+              error.message,
+              addendum
+            ) : null);
+          }
         }
       }
     }
   },
 
-  receiveComponent: function(nextElement, transaction, context) {
-    if (nextElement === this._currentElement &&
-        nextElement._owner != null) {
-      // Since elements are immutable after the owner is rendered,
-      // we can do a cheap identity compare here to determine if this is a
-      // superfluous reconcile. It's possible for state to be mutable but such
-      // change should trigger an update of the owner which would recreate
-      // the element. We explicitly check for the existence of an owner since
-      // it's possible for an element created outside a composite to be
-      // deeply mutated and reused.
-      return;
-    }
+  receiveComponent: function(nextElement, transaction, nextContext) {
+    var prevElement = this._currentElement;
+    var prevContext = this._context;
 
-    this._pendingElement = nextElement;
-    this._pendingContext = context;
-    this.performUpdateIfNecessary(transaction);
+    this._pendingElement = null;
+
+    this.updateComponent(
+      transaction,
+      prevElement,
+      nextElement,
+      prevContext,
+      nextContext
+    );
   },
 
   /**
-   * If any of `_pendingElement`, `_pendingState`, or `_pendingForceUpdate`
+   * If any of `_pendingElement`, `_pendingStateQueue`, or `_pendingForceUpdate`
    * is set, update the component.
    *
    * @param {ReactReconcileTransaction} transaction
    * @internal
    */
   performUpdateIfNecessary: function(transaction) {
-    var compositeLifeCycleState = this._compositeLifeCycleState;
-    // Do not trigger a state transition if we are in the middle of mounting or
-    // receiving props because both of those will already be doing this.
-    if (compositeLifeCycleState === CompositeLifeCycle.MOUNTING ||
-        compositeLifeCycleState === CompositeLifeCycle.RECEIVING_PROPS) {
-      return;
-    }
-
-    if (this._pendingElement == null &&
-        this._pendingState == null &&
-        this._pendingContext == null &&
-        !this._pendingForceUpdate) {
-      return;
-    }
-
-    var prevElement = this._currentElement;
-    var nextElement = prevElement;
     if (this._pendingElement != null) {
-      nextElement = this._pendingElement;
-      this._pendingElement = null;
+      ReactReconciler.receiveComponent(
+        this,
+        this._pendingElement || this._currentElement,
+        transaction,
+        this._context
+      );
     }
 
-    var prevContext = this._context;
-    var nextContext = prevContext;
-    if (this._pendingContext != null) {
-      nextContext = this._pendingContext;
-      this._pendingContext = null;
-    }
+    if (this._pendingStateQueue !== null || this._pendingForceUpdate) {
+      if ("production" !== process.env.NODE_ENV) {
+        ReactElementValidator.checkAndWarnForMutatedProps(
+          this._currentElement
+        );
+      }
 
-    this.updateComponent(
-      transaction,
-      prevElement,
-      nextElement,
-      prevContext,
-      nextContext
-    );
+      this.updateComponent(
+        transaction,
+        this._currentElement,
+        this._currentElement,
+        this._context,
+        this._context
+      );
+    }
   },
 
   /**
@@ -649,35 +520,22 @@ var ReactCompositeComponentMixin = assign({},
    * TODO: Remove this check when owner-context is removed
    */
    _warnIfContextsDiffer: function(ownerBasedContext, parentBasedContext) {
-    var ownerKeys = Object.keys(ownerBasedContext).sort();
+    ownerBasedContext = this._maskContext(ownerBasedContext);
+    parentBasedContext = this._maskContext(parentBasedContext);
     var parentKeys = Object.keys(parentBasedContext).sort();
     var displayName = this.getName() || 'ReactCompositeComponent';
-    if (ownerKeys.length !== parentKeys.length ||
-        ownerKeys.toString() !== parentKeys.toString()) {
+    for (var i = 0; i < parentKeys.length; i++) {
+      var key = parentKeys[i];
       ("production" !== process.env.NODE_ENV ? warning(
-        ownerKeys.length === parentKeys.length &&
-        ownerKeys.toString() === parentKeys.toString(),
-        'owner based context (keys: %s) does not equal parent based ' +
-        'context (keys: %s) while mounting %s ' +
+        ownerBasedContext[key] === parentBasedContext[key],
+        'owner-based and parent-based contexts differ '  +
+        '(values: `%s` vs `%s`) for key (%s) while mounting %s ' +
         '(see: http://fb.me/react-context-by-parent)',
-        Object.keys(ownerBasedContext),
-        Object.keys(parentBasedContext),
+        ownerBasedContext[key],
+        parentBasedContext[key],
+        key,
         displayName
       ) : null);
-    } else {
-      for (var i = 0; i < parentKeys.length; i++) {
-        var key = parentKeys[i];
-        ("production" !== process.env.NODE_ENV ? warning(
-          ownerBasedContext[key] === parentBasedContext[key],
-          'owner-based and parent-based contexts differ '  +
-          '(values: `%s` vs `%s`) for key (%s) while mounting %s ' +
-          '(see: http://fb.me/react-context-by-parent)',
-          ownerBasedContext[key],
-          parentBasedContext[key],
-          key,
-          displayName
-        ) : null);
-      }
     }
   },
 
@@ -703,22 +561,11 @@ var ReactCompositeComponentMixin = assign({},
     prevUnmaskedContext,
     nextUnmaskedContext
   ) {
-    // Update refs regardless of what shouldComponentUpdate returns
-    ReactComponent.Mixin.updateComponent.call(
-      this,
-      transaction,
-      prevParentElement,
-      nextParentElement,
-      prevUnmaskedContext,
-      nextUnmaskedContext
-    );
-
     var inst = this._instance;
 
-    var prevContext = inst.context;
-    var prevProps = inst.props;
-    var nextContext = prevContext;
-    var nextProps = prevProps;
+    var nextContext = inst.context;
+    var nextProps = inst.props;
+
     // Distinguish between a props update versus a simple state update
     if (prevParentElement !== nextParentElement) {
       nextContext = this._processContext(nextParentElement._context);
@@ -726,20 +573,23 @@ var ReactCompositeComponentMixin = assign({},
 
       if ("production" !== process.env.NODE_ENV) {
         if (nextUnmaskedContext != null) {
-          this._warnIfContextsDiffer(nextParentElement._context, nextUnmaskedContext);
+          this._warnIfContextsDiffer(
+            nextParentElement._context,
+            nextUnmaskedContext
+          );
         }
       }
 
-      this._compositeLifeCycleState = CompositeLifeCycle.RECEIVING_PROPS;
+      // An update here will schedule an update but immediately set
+      // _pendingStateQueue which will ensure that any state updates gets
+      // immediately reconciled instead of waiting for the next batch.
+
       if (inst.componentWillReceiveProps) {
         inst.componentWillReceiveProps(nextProps, nextContext);
       }
     }
 
-    this._compositeLifeCycleState = null;
-
-    var nextState = this._pendingState || inst.state;
-    this._pendingState = null;
+    var nextState = this._processPendingState(nextProps, nextContext);
 
     var shouldUpdate =
       this._pendingForceUpdate ||
@@ -747,16 +597,26 @@ var ReactCompositeComponentMixin = assign({},
       inst.shouldComponentUpdate(nextProps, nextState, nextContext);
 
     if ("production" !== process.env.NODE_ENV) {
-      if (typeof shouldUpdate === 'undefined') {
-        console.warn(
-          (this.getName() || 'ReactCompositeComponent') +
-          '.shouldComponentUpdate(): Returned undefined instead of a ' +
-          'boolean value. Make sure to return true or false.'
-        );
-      }
+      ("production" !== process.env.NODE_ENV ? warning(
+        typeof shouldUpdate !== 'undefined',
+        '%s.shouldComponentUpdate(): Returned undefined instead of a ' +
+        'boolean value. Make sure to return true or false.',
+        this.getName() || 'ReactCompositeComponent'
+      ) : null);
     }
 
-    if (!shouldUpdate) {
+    if (shouldUpdate) {
+      this._pendingForceUpdate = false;
+      // Will set `this.props`, `this.state` and `this.context`.
+      this._performComponentUpdate(
+        nextParentElement,
+        nextProps,
+        nextState,
+        nextContext,
+        transaction,
+        nextUnmaskedContext
+      );
+    } else {
       // If it's determined that a component should not update, we still want
       // to set props and state but we shortcut the rest of the update.
       this._currentElement = nextParentElement;
@@ -764,19 +624,32 @@ var ReactCompositeComponentMixin = assign({},
       inst.props = nextProps;
       inst.state = nextState;
       inst.context = nextContext;
-      return;
     }
+  },
 
-    this._pendingForceUpdate = false;
-    // Will set `this.props`, `this.state` and `this.context`.
-    this._performComponentUpdate(
-      nextParentElement,
-      nextProps,
-      nextState,
-      nextContext,
-      transaction,
-      nextUnmaskedContext
-    );
+  _processPendingState: function(props, context) {
+    var inst = this._instance;
+    var queue = this._pendingStateQueue;
+    var replace = this._pendingReplaceState;
+    this._pendingReplaceState = false;
+    this._pendingStateQueue = null;
+
+    if (!queue) {
+      return inst.state;
+    }
+
+    var nextState = assign({}, replace ? queue[0] : inst.state);
+    for (var i = replace ? 1 : 0; i < queue.length; i++) {
+      var partial = queue[i];
+      assign(
+        nextState,
+        typeof partial === 'function' ?
+          partial.call(inst, nextState, props, context) :
+          partial
+      );
+    }
+
+    return nextState;
   },
 
   /**
@@ -836,7 +709,8 @@ var ReactCompositeComponentMixin = assign({},
     var prevRenderedElement = prevComponentInstance._currentElement;
     var nextRenderedElement = this._renderValidatedComponent();
     if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {
-      prevComponentInstance.receiveComponent(
+      ReactReconciler.receiveComponent(
+        prevComponentInstance,
         nextRenderedElement,
         transaction,
         this._processChildContext(context)
@@ -845,26 +719,34 @@ var ReactCompositeComponentMixin = assign({},
       // These two IDs are actually the same! But nothing should rely on that.
       var thisID = this._rootNodeID;
       var prevComponentID = prevComponentInstance._rootNodeID;
-      prevComponentInstance.unmountComponent();
+      ReactReconciler.unmountComponent(prevComponentInstance);
 
       this._renderedComponent = this._instantiateReactComponent(
         nextRenderedElement,
         this._currentElement.type
       );
-      var nextMarkup = this._renderedComponent.mountComponent(
+      var nextMarkup = ReactReconciler.mountComponent(
+        this._renderedComponent,
         thisID,
         transaction,
         context
       );
-      ReactComponentEnvironment.replaceNodeWithMarkupByID(
-        prevComponentID,
-        nextMarkup
-      );
+      this._replaceNodeWithMarkupByID(prevComponentID, nextMarkup);
     }
   },
 
   /**
-   * @private
+   * @protected
+   */
+  _replaceNodeWithMarkupByID: function(prevComponentID, nextMarkup) {
+    ReactComponentEnvironment.replaceNodeWithMarkupByID(
+      prevComponentID,
+      nextMarkup
+    );
+  },
+
+  /**
+   * @protected
    */
   _renderValidatedComponentWithoutOwnerOrContext: function() {
     var inst = this._instance;
@@ -892,7 +774,6 @@ var ReactCompositeComponentMixin = assign({},
       this._currentElement._context
     );
     ReactCurrentOwner.current = this;
-    var inst = this._instance;
     try {
       renderedComponent =
         this._renderValidatedComponentWithoutOwnerOrContext();
@@ -947,7 +828,7 @@ var ReactCompositeComponentMixin = assign({},
    */
   getName: function() {
     var type = this._currentElement.type;
-    var constructor = this._instance.constructor;
+    var constructor = this._instance && this._instance.constructor;
     return (
       type.displayName || (constructor && constructor.displayName) ||
       type.name || (constructor && constructor.name) ||
@@ -970,103 +851,7 @@ var ReactCompositeComponentMixin = assign({},
   // Stub
   _instantiateReactComponent: null
 
-});
-
-var ShallowMixin = assign({},
-  ReactCompositeComponentMixin, {
-
-  /**
-   * Initializes the component, renders markup, and registers event listeners.
-   *
-   * @param {string} rootID DOM ID of the root node.
-   * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
-   * @return {ReactElement} Shallow rendering of the component.
-   * @final
-   * @internal
-   */
-  mountComponent: function(rootID, transaction, context) {
-    ReactComponent.Mixin.mountComponent.call(
-      this,
-      rootID,
-      transaction,
-      context
-    );
-
-    var inst = this._instance;
-
-    // Store a reference from the instance back to the internal representation
-    ReactInstanceMap.set(inst, this);
-
-    this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;
-
-    // No context for shallow-mounted components.
-    inst.props = this._processProps(this._currentElement.props);
-
-    var initialState = inst.getInitialState ? inst.getInitialState() : null;
-    if ("production" !== process.env.NODE_ENV) {
-      // We allow auto-mocks to proceed as if they're returning null.
-      if (typeof initialState === 'undefined' &&
-          inst.getInitialState._isMockFunction) {
-        // This is probably bad practice. Consider warning here and
-        // deprecating this convenience.
-        initialState = null;
-      }
-    }
-    ("production" !== process.env.NODE_ENV ? invariant(
-      typeof initialState === 'object' && !Array.isArray(initialState),
-      '%s.getInitialState(): must return an object or null',
-      this.getName() || 'ReactCompositeComponent'
-    ) : invariant(typeof initialState === 'object' && !Array.isArray(initialState)));
-    inst.state = initialState;
-
-    this._pendingState = null;
-    this._pendingForceUpdate = false;
-
-    if (inst.componentWillMount) {
-      inst.componentWillMount();
-      // When mounting, calls to `setState` by `componentWillMount` will set
-      // `this._pendingState` without triggering a re-render.
-      if (this._pendingState) {
-        inst.state = this._pendingState;
-        this._pendingState = null;
-      }
-    }
-
-    // No recursive call to instantiateReactComponent for shallow rendering.
-    this._renderedComponent =
-      this._renderValidatedComponentWithoutOwnerOrContext();
-
-    // Done with mounting, `setState` will now trigger UI changes.
-    this._compositeLifeCycleState = null;
-
-    // No call to this._renderedComponent.mountComponent for shallow
-    // rendering.
-
-    if (inst.componentDidMount) {
-      transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
-    }
-
-    return this._renderedComponent;
-  },
-
-  /**
-   * Call the component's `render` method and update the DOM accordingly.
-   *
-   * @param {ReactReconcileTransaction} transaction
-   * @internal
-   */
-  _updateRenderedComponent: function(transaction) {
-    var prevComponentInstance = this._renderedComponent;
-    var prevRenderedElement = prevComponentInstance._currentElement;
-    // Use the without-owner-or-context variant of _rVC below:
-    var nextRenderedElement =
-      this._renderValidatedComponentWithoutOwnerOrContext();
-    // This is a noop in shallow render
-    shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement);
-    this._renderedComponent = nextRenderedElement;
-  }
-
-});
+};
 
 ReactPerf.measureMethods(
   ReactCompositeComponentMixin,
@@ -1080,11 +865,7 @@ ReactPerf.measureMethods(
 
 var ReactCompositeComponent = {
 
-  LifeCycle: CompositeLifeCycle,
-
-  Mixin: ReactCompositeComponentMixin,
-
-  ShallowMixin: ShallowMixin
+  Mixin: ReactCompositeComponentMixin
 
 };