Refactor Attribute Processing (Step 1)

Summary: Concolidate the creation of the "update payload" into
ReactNativeAttributePayload which now has a create
and a diff version. The create version can be used by
both mountComponent and setNativeProps. This means that
diffRawProperties moves into ReactNativeAttributePayload.

Instead of storing previousFlattenedStyle as memoized
state in the component tree, I recalculate it every
time. This allows better use of the generational GC.
However, it is still probably a fairly expensive
technique so I will follow it up with a diff that
walks both nested array trees to do the diffing in a
follow up.

This is the first diff of several steps.

@​public

Reviewed By: @vjeux

Differential Revision: D2440644

fb-gh-sync-id: 1d0da4f6e2bf716f33e119df947c044abb918471

Libraries/ReactNative/ReactNativeBaseComponent.js

@@ -12,17 +12,13 @@
 'use strict';
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
+var ReactNativeAttributePayload = require('ReactNativeAttributePayload');
 var ReactNativeEventEmitter = require('ReactNativeEventEmitter');
 var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 var ReactNativeTagHandles = require('ReactNativeTagHandles');
 var ReactMultiChild = require('ReactMultiChild');
 var RCTUIManager = require('NativeModules').UIManager;
 
-var styleDiffer = require('styleDiffer');
-var deepFreezeAndThrowOnMutationInDev = require('deepFreezeAndThrowOnMutationInDev');
-var diffRawProperties = require('diffRawProperties');
-var flattenStyle = require('flattenStyle');
-var precomputeStyle = require('precomputeStyle');
 var warning = require('warning');
 
 var registrationNames = ReactNativeEventEmitter.registrationNames;
@@ -131,63 +127,6 @@ ReactNativeBaseComponent.Mixin = {
     }
   },
 
-
-  /**
-   * Beware, this function has side effect to store this.previousFlattenedStyle!
-   *
-   * @param {!object} prevProps Previous properties
-   * @param {!object} nextProps Next properties
-   * @param {!object} validAttributes Set of valid attributes and how they
-   *                  should be diffed
-   */
-  computeUpdatedProperties: function(prevProps, nextProps, validAttributes) {
-    if (__DEV__) {
-      for (var key in nextProps) {
-        if (nextProps.hasOwnProperty(key) &&
-            nextProps[key] &&
-            validAttributes[key]) {
-          deepFreezeAndThrowOnMutationInDev(nextProps[key]);
-        }
-      }
-    }
-
-    var updatePayload = diffRawProperties(
-      null, // updatePayload
-      prevProps,
-      nextProps,
-      validAttributes
-    );
-
-    for (var key in updatePayload) {
-      var process = validAttributes[key] && validAttributes[key].process;
-      if (process) {
-        updatePayload[key] = process(updatePayload[key]);
-      }
-    }
-
-    // The style property is a deeply nested element which includes numbers
-    // to represent static objects. Most of the time, it doesn't change across
-    // renders, so it's faster to spend the time checking if it is different
-    // before actually doing the expensive flattening operation in order to
-    // compute the diff.
-    if (styleDiffer(nextProps.style, prevProps.style)) {
-      var nextFlattenedStyle = precomputeStyle(
-        flattenStyle(nextProps.style),
-        this.viewConfig.validAttributes
-      );
-      updatePayload = diffRawProperties(
-        updatePayload,
-        this.previousFlattenedStyle,
-        nextFlattenedStyle,
-        ReactNativeStyleAttributes
-      );
-      this.previousFlattenedStyle = nextFlattenedStyle;
-    }
-
-    return updatePayload;
-  },
-
-
   /**
    * Updates the component's currently mounted representation.
    *
@@ -200,7 +139,7 @@ ReactNativeBaseComponent.Mixin = {
     var prevElement = this._currentElement;
     this._currentElement = nextElement;
 
-    var updatePayload = this.computeUpdatedProperties(
+    var updatePayload = ReactNativeAttributePayload.diff(
       prevElement.props,
       nextElement.props,
       this.viewConfig.validAttributes
@@ -262,10 +201,8 @@ ReactNativeBaseComponent.Mixin = {
 
     var tag = ReactNativeTagHandles.allocateTag();
 
-    this.previousFlattenedStyle = {};
-    var updatePayload = this.computeUpdatedProperties(
-      {}, // previous props
-      this._currentElement.props, // next props
+    var updatePayload = ReactNativeAttributePayload.create(
+      this._currentElement.props,
       this.viewConfig.validAttributes
     );