PureRenderMixin.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. /**
  2. * Copyright 2013-present, Facebook, Inc.
  3. * All rights reserved.
  4. *
  5. * This source code is licensed under the BSD-style license found in the
  6. * LICENSE file in the root directory of this source tree. An additional grant
  7. * of patent rights can be found in the PATENTS file in the same directory.
  8. *
  9. * @providesModule ReactComponentWithPureRenderMixin
  10. */
  11. import isEqual from "./isEqual";
  12. function shallowCompare(instance, nextProps, nextState) {
  13. return !isEqual(instance.props, nextProps, true) || !isEqual(instance.state, nextState, true);
  14. }
  15. /**
  16. * If your React component's render function is "pure", e.g. it will render the
  17. * same result given the same props and state, provide this mixin for a
  18. * considerable performance boost.
  19. *
  20. * Most React components have pure render functions.
  21. *
  22. * Example:
  23. *
  24. * var ReactComponentWithPureRenderMixin =
  25. * require('ReactComponentWithPureRenderMixin');
  26. * React.createClass({
  27. * mixins: [ReactComponentWithPureRenderMixin],
  28. *
  29. * render: function() {
  30. * return <div className={this.props.className}>foo</div>;
  31. * }
  32. * });
  33. *
  34. * Note: This only checks shallow equality for props and state. If these contain
  35. * complex data structures this mixin may have false-negatives for deeper
  36. * differences. Only mixin to components which have simple props and state, or
  37. * use `forceUpdate()` when you know deep data structures have changed.
  38. *
  39. * See https://facebook.github.io/react/docs/pure-render-mixin.html
  40. */
  41. var ReactComponentWithPureRenderMixin = {
  42. shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
  43. return shallowCompare(this, nextProps, nextState);
  44. }
  45. };
  46. export default ReactComponentWithPureRenderMixin;