Switch first-class refs to use functions

Closes facebook#1373.

Test Plan: jest

src/core/ReactCompositeComponent.js

@@ -161,8 +161,6 @@ var ReactCompositeComponentMixin = assign({},
  context
  );
 
- ReactRef.attachRefs(this, this._currentElement);
-
  this._context = context;
  this._mountOrder = nextMountID++;
  this._rootNodeID = rootID;
@@ -254,9 +252,18 @@ var ReactCompositeComponentMixin = assign({},
  if (inst.componentDidMount) {
  transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
  }
+ transaction.getReactMountReady().enqueue(this.attachRefs, this);
  return markup;
  },
 
+ /**
+ * Helper to call ReactRef.attachRefs with this composite component, split out
+ * to avoid allocations in the transaction mount-ready queue.
+ */
+ attachRefs: function() {
+ ReactRef.attachRefs(this, this._currentElement);
+ },
+
  /**
  * Releases any resources allocated by `mountComponent`.
  *
@@ -266,6 +273,8 @@ var ReactCompositeComponentMixin = assign({},
  unmountComponent: function() {
  var inst = this._instance;
 
+ ReactRef.detachRefs(this, this._currentElement);
+
  this._compositeLifeCycleState = CompositeLifeCycle.UNMOUNTING;
  if (inst.componentWillUnmount) {
  inst.componentWillUnmount();
@@ -281,8 +290,6 @@ var ReactCompositeComponentMixin = assign({},
  this._pendingCallbacks = null;
  this._pendingElement = null;
 
- ReactRef.detachRefs(this, this._currentElement);
-
  ReactComponent.Mixin.unmountComponent.call(this);
 
  ReactComponentEnvironment.unmountIDFromEnvironment(this._rootNodeID);
@@ -728,15 +735,23 @@ var ReactCompositeComponentMixin = assign({},
  nextUnmaskedContext
  );
 
- // Update refs regardless of what shouldComponentUpdate returns
- ReactRef.updateRefs(this, prevParentElement, nextParentElement);
-
  var inst = this._instance;
 
  var prevContext = inst.context;
  var prevProps = inst.props;
  var nextContext = prevContext;
  var nextProps = prevProps;
+
+ var refsChanged = ReactRef.shouldUpdateRefs(
+ this,
+ prevParentElement,
+ nextParentElement
+ );
+
+ if (refsChanged) {
+ ReactRef.detachRefs(this, prevParentElement);
+ }
+
  // Distinguish between a props update versus a simple state update
  if (prevParentElement !== nextParentElement) {
  nextContext = this._processContext(nextParentElement._context);
@@ -774,27 +789,31 @@ var ReactCompositeComponentMixin = assign({},
  }
  }
 
- 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;
  this._context = nextUnmaskedContext;
  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
- );
+ // Update refs regardless of what shouldComponentUpdate returns
+ if (refsChanged) {
+ transaction.getReactMountReady().enqueue(this.attachRefs, this);
+ }
  },
 
  /**
@@ -819,6 +838,7 @@ var ReactCompositeComponentMixin = assign({},
  ) {
  var inst = this._instance;
 
+ var prevElement = this._currentElement;
  var prevProps = inst.props;
  var prevState = inst.state;
  var prevContext = inst.context;

src/core/ReactRef.js

@@ -14,98 +14,22 @@
 var ReactOwner = require('ReactOwner');
 var ReactUpdates = require('ReactUpdates');
 
-var accumulate = require('accumulate');
-var assign = require('Object.assign');
-var forEachAccumulated = require('forEachAccumulated');
-var invariant = require('invariant');
-
-function ReactRef() {
- this._value = null;
- this._successCallbacks = null;
- this._failureCallbacks = null;
-}
-
-/**
- * Call the enqueued success or failure callbacks for a ref, as appropriate.
- */
-function dispatchCallbacks() {
- /*jshint validthis:true */
- var successCallbacks = this._successCallbacks;
- var failureCallbacks = this._failureCallbacks;
- this._successCallbacks = null;
- this._failureCallbacks = null;
-
- if (this._value) {
- forEachAccumulated(successCallbacks, callSuccess, this);
- } else {
- forEachAccumulated(failureCallbacks, callFailure);
- }
-}
-
-/**
- * Call a single success callback, passing the ref's value.
- */
-function callSuccess(cb) {
- /*jshint validthis:true */
- cb(this._value);
-}
-
-/**
- * Call a single failure callback, passing no arguments.
- */
-function callFailure(cb) {
- cb();
-}
-
-assign(ReactRef.prototype, {
- /**
- * Get the value of a ref asynchronously. Accepts a success callback and an
- * optional failure callback. If the ref has been rendered, the success
- * callback will be called with the component instance; otherwise, the failure
- * callback will be executed.
- *
- * @param {function} success Callback in case of success
- * @param {?function} failure Callback in case of failure
- */
- then: function(success, failure) {
- invariant(
- typeof success === 'function',
- 'ReactRef.then(...): Must provide a success callback.'
- );
- if (this._successCallbacks == null) {
- ReactUpdates.asap(dispatchCallbacks, this);
- }
- this._successCallbacks = accumulate(this._successCallbacks, success);
- if (failure) {
- this._failureCallbacks = accumulate(this._failureCallbacks, failure);
- }
- }
-});
-
-function attachFirstClassRef(ref, value) {
- ref._value = value.getPublicInstance();
-}
-
-function detachFirstClassRef(ref, value) {
- // Check that `component` is still the current ref because we do not want to
- // detach the ref if another component stole it.
- if (ref._value === value) {
- ref._value = null;
- }
-}
+var ReactRef = {};
 
 function attachRef(ref, component, owner) {
- if (ref instanceof ReactRef) {
- attachFirstClassRef(ref, component);
+ if (typeof ref === 'function') {
+ ref(component.getPublicInstance());
  } else {
+ // Legacy ref
  ReactOwner.addComponentAsRefTo(component, ref, owner);
  }
 }
 
 function detachRef(ref, component, owner) {
- if (ref instanceof ReactRef) {
- detachFirstClassRef(ref, component);
+ if (typeof ref === 'function') {
+ ref(null);
  } else {
+ // Legacy ref
  ReactOwner.removeComponentAsRefFrom(component, ref, owner);
  }
 }
@@ -117,7 +41,7 @@ ReactRef.attachRefs = function(instance, element) {
  }
 };
 
-ReactRef.updateRefs = function(instance, prevElement, nextElement) {
+ReactRef.shouldUpdateRefs = function(instance, prevElement, 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
@@ -130,16 +54,10 @@ ReactRef.updateRefs = function(instance, prevElement, nextElement) {
  // is made. It probably belongs where the key checking and
  // instantiateReactComponent is done.
 
- if (nextElement._owner !== prevElement._owner ||
- nextElement.ref !== prevElement.ref) {
- if (prevElement.ref != null) {
- detachRef(prevElement.ref, instance, prevElement._owner);
- }
- // Correct, even if the owner is the same, and only the ref has changed.
- if (nextElement.ref != null) {
- attachRef(nextElement.ref, instance, nextElement._owner);
- }
- }
+ return (
+ nextElement._owner !== prevElement._owner ||
+ nextElement.ref !== prevElement.ref
+ );
 };
 
 ReactRef.detachRefs = function(instance, element) {