From 6235e1fcfd2fa636748f340658eec4d0132a7c47 Mon Sep 17 00:00:00 2001
From: paranoidjk <hust2012jiangkai@gmail.com>
Date: Mon, 3 Jul 2017 20:02:45 +0800
Subject: [PATCH] fix: #226

---
 examples/range.js | 25 +++++++++++++++++++++++++
 package.json      |  3 ++-
 src/Range.jsx     |  6 ++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/examples/range.js b/examples/range.js
index bb6c668c4..f06cffb87 100644
--- a/examples/range.js
+++ b/examples/range.js
@@ -111,6 +111,27 @@ class ControlledRange extends React.Component {
   }
 }
 
+// https://github.com/react-component/slider/issues/226
+class PureRenderRange extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      foo: false,
+    };
+  }
+  handleChange = (value) => {
+    console.log(value);
+    this.setState({
+      foo: !this.state.foo,
+    });
+  }
+  render() {
+    return (
+      <Range defaultValue={[20, 40, 60, 80]} onChange={this.handleChange} allowCross={false} />
+    );
+  }
+}
+
 ReactDOM.render(
   <div>
     <div style={style}>
@@ -153,5 +174,9 @@ ReactDOM.render(
       <p>Range with dynamic `max` `min`</p>
       <DynamicBounds />
     </div>
+    <div style={style}>
+      <p>Range as child component</p>
+      <PureRenderRange />
+    </div>
   </div>
   , document.getElementById('__react-content'));
diff --git a/package.json b/package.json
index 1b85f405f..663ae01fd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "8.1.3",
+  "version": "8.1.4",
   "description": "Slider UI component for React",
   "keywords": [
     "react",
@@ -74,6 +74,7 @@
     "prop-types": "^15.5.4",
     "rc-tooltip": "^3.4.2",
     "rc-util": "^4.0.4",
+    "shallowequal": "^1.0.1",
     "warning": "^3.0.0"
   }
 }
diff --git a/src/Range.jsx b/src/Range.jsx
index a2cd0ce2c..ed9306cf7 100644
--- a/src/Range.jsx
+++ b/src/Range.jsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import shallowEqual from 'shallowequal';
 import Track from './common/Track';
 import createSlider from './common/createSlider';
 import * as utils from './utils';
@@ -48,6 +49,11 @@ class Range extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     if (!('value' in nextProps || 'min' in nextProps || 'max' in nextProps)) return;
+    if (this.props.min === nextProps.min &&
+        this.props.max === nextProps.max &&
+        shallowEqual(this.props.value, nextProps.value)) {
+      return;
+    }
     const { bounds } = this.state;
     const value = nextProps.value || bounds;
     const nextBounds = value.map(v => this.trimAlignValue(v, nextProps));