移除react依赖，添加shouldComponentUpdate方法优化性能

mtblc · Jul 12, 2016 · 3caa11b · 3caa11b
1 parent 846f652
commit 3caa11b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/lib/DatePicker.js b/lib/DatePicker.js
@@ -14,7 +14,6 @@ class DatePicker extends Component {
     constructor(props) {
         super(props); // 容器转过的角度
         this.state = {
-            angle: 0,
             date: this._productDate(props.date),
             minDate: this._productDate(props.minDate),
             maxDate: this._productDate(props.maxDate),
@@ -24,6 +23,20 @@ class DatePicker extends Component {
         this.handleDateSelect = this.handleDateSelect.bind(this);
     }
 
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            date: this._productDate(nextProps.date),
+            minDate: this._productDate(nextProps.minDate),
+            maxDate: this._productDate(nextProps.maxDate),
+        });
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextState.date.timestamp !== this.state.date.timestamp ||
+            nextProps.date !== this.props.date ||
+            nextProps.minDate !== this.props.minDate ||
+            nextProps.maxDate !== this.props.maxDate;
+    }
 
     _productDate(date) {
         const nDate = nextDate(date, 0);

diff --git a/package.json b/package.json
@@ -59,14 +59,12 @@
     "style-loader": "^0.13.1",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1",
-    "webpack-merge": "^0.12.0"
-  },
-  "dependencies": {
+    "webpack-merge": "^0.12.0",
     "react": "^15.2.0",
     "react-dom": "^15.2.0"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0"
   },
   "license": "ISC"
-}
+}
diff --git a/test/functional/DatePicker_spec.js b/test/functional/DatePicker_spec.js
@@ -137,7 +137,7 @@ describe('时间选择器组件DatePicker', () => {
                 changedTouches: [{ pageY: 50 }],
             };
 
-            datePicker.setState({ minDate: productDate(new Date(2010, 2, 7)) });
+            datePicker.setProps({ minDate: new Date(2010, 2, 7) });
             yearPicker.simulate('touchStart', touchstartEvent);
             yearPicker.simulate('touchEnd', touchendEvent);
             yearPicker.simulate('transitionEnd', touchendEvent);
@@ -162,7 +162,7 @@ describe('时间选择器组件DatePicker', () => {
                 changedTouches: [{ pageY: -50 }],
             };
 
-            datePicker.setState({ maxDate: productDate(new Date(2010, 2, 7)) });
+            datePicker.setProps({ maxDate: new Date(2010, 2, 7) });
             yearPicker.simulate('touchStart', touchstartEvent);
             yearPicker.simulate('touchEnd', touchendEvent);
             yearPicker.simulate('transitionEnd', touchendEvent);