⚡ Migrate to new lifecycle methods

ant-design/ant-design#9792
brainy989 · Jun 5, 2019 · a8b4307 · a8b4307
1 parent 69ff8f0
commit a8b4307
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -55,8 +55,7 @@
   "dependencies": {
     "babel-runtime": "^6.23.0",
     "classnames": "2.x",
-    "prop-types": "15.x",
-    "rc-util": "^4.0.4"
+    "prop-types": "15.x"
   },
   "devDependencies": {
     "core-js": "^2.5.1",

diff --git a/src/Checkbox.jsx b/src/Checkbox.jsx
@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 import classNames from 'classnames';
 
-export default class Checkbox extends React.Component {
+export default class Checkbox extends Component {
   static propTypes = {
     prefixCls: PropTypes.string,
     className: PropTypes.string,
@@ -23,6 +22,7 @@ export default class Checkbox extends React.Component {
     autoFocus: PropTypes.bool,
     value: PropTypes.any,
   };
+
   static defaultProps = {
     prefixCls: 'rc-checkbox',
     className: '',
@@ -33,6 +33,7 @@ export default class Checkbox extends React.Component {
     onBlur() {},
     onChange() {},
   };
+
   constructor(props) {
     super(props);
 
@@ -43,16 +44,14 @@ export default class Checkbox extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if ('checked' in nextProps) {
-      this.setState({
-        checked: nextProps.checked,
-      });
+  static getDerivedStateFromProps(props, state) {
+    if ('checked' in props) {
+      return {
+        ...state,
+        checked: props.checked,
+      };
     }
-  }
-
-  shouldComponentUpdate(...args) {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
+    return null;
   }
 
   focus() {
@@ -64,28 +63,30 @@ export default class Checkbox extends React.Component {
   }
 
   handleChange = (e) => {
-    const { props } = this;
-    if (props.disabled) {
+    const { disabled, onChange } = this.props;
+    if (disabled) {
       return;
     }
-    if (!('checked' in props)) {
+    if (!('checked' in this.props)) {
       this.setState({
         checked: e.target.checked,
       });
     }
-    props.onChange({
-      target: {
-        ...props,
-        checked: e.target.checked,
-      },
-      stopPropagation() {
-        e.stopPropagation();
-      },
-      preventDefault() {
-        e.preventDefault();
-      },
-      nativeEvent: e.nativeEvent,
-    });
+    if (onChange) {
+      onChange({
+        target: {
+          ...this.props,
+          checked: e.target.checked,
+        },
+        stopPropagation() {
+          e.stopPropagation();
+        },
+        preventDefault() {
+          e.preventDefault();
+        },
+        nativeEvent: e.nativeEvent,
+      });
+    }
   };
 
   saveInput = (node) => {

diff --git a/tests/setup.js b/tests/setup.js
@@ -1,4 +1,4 @@
-global.requestAnimationFrame = global.requestAnimationFrame || function (cb) {
+global.requestAnimationFrame = global.requestAnimationFrame || function requestAnimationFrame(cb) {
   return setTimeout(cb, 0);
 };