Add React.PureComponent (#7195)

This provides an easy way to indicate that components should only rerender when given new props, like PureRenderMixin. If you rely on mutation in your React components, you can continue to use `React.Component`.

Inheriting from `React.PureComponent` indicates to React that your component doesn't need to rerender when the props are unchanged. We'll compare the old and new props before each render and short-circuit if they're unchanged. It's like an automatic shouldComponentUpdate.

src/isomorphic/React.js

@@ -13,6 +13,7 @@
 
 var ReactChildren = require('ReactChildren');
 var ReactComponent = require('ReactComponent');
+var ReactPureComponent = require('ReactPureComponent');
 var ReactClass = require('ReactClass');
 var ReactDOMFactories = require('ReactDOMFactories');
 var ReactElement = require('ReactElement');
@@ -63,6 +64,7 @@ var React = {
   },
 
   Component: ReactComponent,
+  PureComponent: ReactPureComponent,
 
   createElement: createElement,
   cloneElement: cloneElement,

src/isomorphic/modern/class/ReactPureComponent.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactPureComponent
+ */
+
+'use strict';
+
+var ReactComponent = require('ReactComponent');
+var ReactNoopUpdateQueue = require('ReactNoopUpdateQueue');
+
+var emptyObject = require('emptyObject');
+
+/**
+ * Base class helpers for the updating state of a component.
+ */
+function ReactPureComponent(props, context, updater) {
+  // Duplicated from ReactComponent.
+  this.props = props;
+  this.context = context;
+  this.refs = emptyObject;
+  // We initialize the default updater but the real one gets injected by the
+  // renderer.
+  this.updater = updater || ReactNoopUpdateQueue;
+}
+
+function ComponentDummy() {}
+ComponentDummy.prototype = ReactComponent.prototype;
+ReactPureComponent.prototype = new ComponentDummy();
+ReactPureComponent.prototype.constructor = ReactPureComponent;
+// Avoid an extra prototype jump for these methods.
+Object.assign(ReactPureComponent.prototype, ReactComponent.prototype);
+ReactPureComponent.prototype.isPureReactComponent = true;
+
+module.exports = ReactPureComponent;

src/isomorphic/modern/class/__tests__/ReactPureComponent-test.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+var React;
+var ReactDOM;
+
+describe('ReactPureComponent', function() {
+  beforeEach(function() {
+    React = require('React');
+    ReactDOM = require('ReactDOM');
+  });
+
+  it('should render', function() {
+    var renders = 0;
+    class Component extends React.PureComponent {
+      constructor() {
+        super();
+        this.state = {type: 'mushrooms'};
+      }
+      render() {
+        renders++;
+        return <div>{this.props.text[0]}</div>;
+      }
+    }
+
+    var container = document.createElement('div');
+    var text;
+    var component;
+
+    text = ['porcini'];
+    component = ReactDOM.render(<Component text={text} />, container);
+    expect(container.textContent).toBe('porcini');
+    expect(renders).toBe(1);
+
+    text = ['morel'];
+    component = ReactDOM.render(<Component text={text} />, container);
+    expect(container.textContent).toBe('morel');
+    expect(renders).toBe(2);
+
+    text[0] = 'portobello';
+    component = ReactDOM.render(<Component text={text} />, container);
+    expect(container.textContent).toBe('morel');
+    expect(renders).toBe(2);
+
+    // Setting state without changing it doesn't cause a rerender.
+    component.setState({type: 'mushrooms'});
+    expect(container.textContent).toBe('morel');
+    expect(renders).toBe(2);
+
+    // But changing state does.
+    component.setState({type: 'portobello mushrooms'});
+    expect(container.textContent).toBe('portobello');
+    expect(renders).toBe(3);
+  });
+
+  it('can override shouldComponentUpdate', function() {
+    var renders = 0;
+    class Component extends React.PureComponent {
+      render() {
+        renders++;
+        return <div />;
+      }
+      shouldComponentUpdate() {
+        return true;
+      }
+    }
+    var container = document.createElement('div');
+    ReactDOM.render(<Component />, container);
+    ReactDOM.render(<Component />, container);
+    expect(renders).toBe(2);
+  });
+
+  it('extends React.Component', function() {
+    var renders = 0;
+    class Component extends React.PureComponent {
+      render() {
+        expect(this instanceof React.Component).toBe(true);
+        expect(this instanceof React.PureComponent).toBe(true);
+        renders++;
+        return <div />;
+      }
+    }
+    ReactDOM.render(<Component />, document.createElement('div'));
+    expect(renders).toBe(1);
+  });
+
+});

src/renderers/shared/stack/reconciler/ReactCompositeComponent.js

@@ -22,12 +22,18 @@ var ReactPropTypeLocations = require('ReactPropTypeLocations');
 var ReactReconciler = require('ReactReconciler');
 
 var checkReactTypeSpec = require('checkReactTypeSpec');
-
 var emptyObject = require('emptyObject');
 var invariant = require('invariant');
+var shallowEqual = require('shallowEqual');
 var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
 var warning = require('warning');
 
+var CompositeTypes = {
+  ImpureClass: 0,
+  PureClass: 1,
+  StatelessFunctional: 2,
+};
+
 function StatelessComponent(Component) {
 }
 StatelessComponent.prototype.render = function() {
@@ -88,7 +94,11 @@ function invokeComponentDidUpdateWithTimer(prevProps, prevState, prevContext) {
 }
 
 function shouldConstruct(Component) {
-  return Component.prototype && Component.prototype.isReactComponent;
+  return !!(Component.prototype && Component.prototype.isReactComponent);
+}
+
+function isPureComponent(Component) {
+  return !!(Component.prototype && Component.prototype.isPureReactComponent);
 }
 
 /**
@@ -141,6 +151,7 @@ var ReactCompositeComponentMixin = {
   construct: function(element) {
     this._currentElement = element;
     this._rootNodeID = null;
+    this._compositeType = null;
     this._instance = null;
     this._hostParent = null;
     this._hostContainerInfo = null;
@@ -199,11 +210,17 @@ var ReactCompositeComponentMixin = {
     var updateQueue = transaction.getUpdateQueue();
 
     // Initialize the public class
-    var inst = this._constructComponent(publicProps, publicContext, updateQueue);
+    var doConstruct = shouldConstruct(Component);
+    var inst = this._constructComponent(
+      doConstruct,
+      publicProps,
+      publicContext,
+      updateQueue
+    );
     var renderedElement;
 
     // Support functional components
-    if (!shouldConstruct(Component) && (inst == null || inst.render == null)) {
+    if (!doConstruct && (inst == null || inst.render == null)) {
       renderedElement = inst;
       warnIfInvalidElement(Component, renderedElement);
       invariant(
@@ -215,6 +232,13 @@ var ReactCompositeComponentMixin = {
         Component.displayName || Component.name || 'Component'
       );
       inst = new StatelessComponent(Component);
+      this._compositeType = CompositeTypes.StatelessFunctional;
+    } else {
+      if (isPureComponent(Component)) {
+        this._compositeType = CompositeTypes.PureClass;
+      } else {
+        this._compositeType = CompositeTypes.ImpureClass;
+      }
     }
 
     if (__DEV__) {
@@ -353,23 +377,43 @@ var ReactCompositeComponentMixin = {
     return markup;
   },
 
-  _constructComponent: function(publicProps, publicContext, updateQueue) {
+  _constructComponent: function(
+    doConstruct,
+    publicProps,
+    publicContext,
+    updateQueue
+  ) {
     if (__DEV__) {
       ReactCurrentOwner.current = this;
       try {
-        return this._constructComponentWithoutOwner(publicProps, publicContext, updateQueue);
+        return this._constructComponentWithoutOwner(
+          doConstruct,
+          publicProps,
+          publicContext,
+          updateQueue
+        );
       } finally {
         ReactCurrentOwner.current = null;
       }
     } else {
-      return this._constructComponentWithoutOwner(publicProps, publicContext, updateQueue);
+      return this._constructComponentWithoutOwner(
+        doConstruct,
+        publicProps,
+        publicContext,
+        updateQueue
+      );
     }
   },
 
-  _constructComponentWithoutOwner: function(publicProps, publicContext, updateQueue) {
+  _constructComponentWithoutOwner: function(
+    doConstruct,
+    publicProps,
+    publicContext,
+    updateQueue
+  ) {
     var Component = this._currentElement.type;
     var instanceOrElement;
-    if (shouldConstruct(Component)) {
+    if (doConstruct) {
       if (__DEV__) {
         if (this._debugID !== 0) {
           ReactInstrumentation.debugTool.onBeginLifeCycleTimer(
@@ -765,7 +809,6 @@ var ReactCompositeComponentMixin = {
 
     var willReceive = false;
     var nextContext;
-    var nextProps;
 
     // Determine if the context has changed or not
     if (this._context === nextUnmaskedContext) {
@@ -775,7 +818,8 @@ var ReactCompositeComponentMixin = {
       willReceive = true;
     }
 
-    nextProps = nextParentElement.props;
+    var prevProps = prevParentElement.props;
+    var nextProps = nextParentElement.props;
 
     // Not a simple state update but a props update
     if (prevParentElement !== nextParentElement) {
@@ -808,22 +852,30 @@ var ReactCompositeComponentMixin = {
     var nextState = this._processPendingState(nextProps, nextContext);
     var shouldUpdate = true;
 
-    if (!this._pendingForceUpdate && inst.shouldComponentUpdate) {
-      if (__DEV__) {
-        if (this._debugID !== 0) {
-          ReactInstrumentation.debugTool.onBeginLifeCycleTimer(
-            this._debugID,
-            'shouldComponentUpdate'
-          );
+    if (!this._pendingForceUpdate) {
+      if (inst.shouldComponentUpdate) {
+        if (__DEV__) {
+          if (this._debugID !== 0) {
+            ReactInstrumentation.debugTool.onBeginLifeCycleTimer(
+              this._debugID,
+              'shouldComponentUpdate'
+            );
+          }
         }
-      }
-      shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
-      if (__DEV__) {
-        if (this._debugID !== 0) {
-          ReactInstrumentation.debugTool.onEndLifeCycleTimer(
-            this._debugID,
-            'shouldComponentUpdate'
-          );
+        shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
+        if (__DEV__) {
+          if (this._debugID !== 0) {
+            ReactInstrumentation.debugTool.onEndLifeCycleTimer(
+              this._debugID,
+              'shouldComponentUpdate'
+            );
+          }
+        }
+      } else {
+        if (this._compositeType === CompositeTypes.PureClass) {
+          shouldUpdate =
+            !shallowEqual(prevProps, nextProps) ||
+            !shallowEqual(inst.state, nextState);
         }
       }
     }
@@ -1088,7 +1140,7 @@ var ReactCompositeComponentMixin = {
    */
   _renderValidatedComponent: function() {
     var renderedComponent;
-    if (__DEV__ || !(this._instance instanceof StatelessComponent)) {
+    if (__DEV__ || this._compositeType !== CompositeTypes.StatelessFunctional) {
       ReactCurrentOwner.current = this;
       try {
         renderedComponent =
@@ -1178,7 +1230,7 @@ var ReactCompositeComponentMixin = {
    */
   getPublicInstance: function() {
     var inst = this._instance;
-    if (inst instanceof StatelessComponent) {
+    if (this._compositeType === CompositeTypes.StatelessFunctional) {
       return null;
     }
     return inst;