fix: add lint react/sort-comp rule and fix it

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
   },
   rules: {
     'jsx-a11y/href-no-hash': [0],
+    'react/sort-comp': 1,
   },
   settings: {
     polyfills: ['fetch', 'promises'],

src/components/CountDown/index.js

@@ -23,9 +23,6 @@ const initTime = props => {
 };
 
 class CountDown extends Component {
-  timer = 0;
-
-  interval = 1000;
 
   constructor(props) {
     super(props);
@@ -35,6 +32,16 @@ class CountDown extends Component {
     };
   }
 
+  static getDerivedStateFromProps(nextProps, preState) {
+    const { lastTime } = initTime(nextProps);
+    if (preState.lastTime !== lastTime) {
+      return {
+        lastTime,
+      };
+    }
+    return null;
+  }
+
   componentDidMount() {
     this.tick();
   }
@@ -51,15 +58,9 @@ class CountDown extends Component {
     clearTimeout(this.timer);
   }
 
-  static getDerivedStateFromProps(nextProps, preState) {
-    const { lastTime } = initTime(nextProps);
-    if (preState.lastTime !== lastTime) {
-      return {
-        lastTime,
-      };
-    }
-    return null;
-  }
+  timer = 0;
+
+  interval = 1000;
 
   // defaultFormat = time => (
   //  <span>{moment(time).format('hh:mm:ss')}</span>

src/components/TagSelect/index.js

@@ -26,6 +26,13 @@ class TagSelect extends Component {
     };
   }
 
+  static getDerivedStateFromProps(nextProps) {
+    if ('value' in nextProps && nextProps.value) {
+      return { value: nextProps.value };
+    }
+    return null;
+  }
+
   onChange = value => {
     const { onChange } = this.props;
     if (!('value' in this.props)) {
@@ -44,13 +51,6 @@ class TagSelect extends Component {
     this.onChange(checkedTags);
   };
 
-  static getDerivedStateFromProps(nextProps) {
-    if ('value' in nextProps && nextProps.value) {
-      return { value: nextProps.value };
-    }
-    return null;
-  }
-
   getAllTags() {
     let { children } = this.props;
     children = React.Children.toArray(children);

src/layouts/BasicLayout.js

@@ -64,9 +64,6 @@ const query = {
 };
 
 class BasicLayout extends React.PureComponent {
-  state = {
-    rendering: true,
-  };
   constructor(props) {
     super(props);
     const { menuData } = this.props;
@@ -74,6 +71,28 @@ class BasicLayout extends React.PureComponent {
     // Because there are many places to be. So put it here
     this.breadcrumbNameMap = getBreadcrumbNameMap(menuData);
   }
+
+  state = {
+    rendering: true,
+  };
+
+  componentDidMount() {
+    this.renderRef = requestAnimationFrame(() => {
+      this.setState({
+        rendering: false,
+      });
+    });
+  }
+
+  componentDidUpdate() {
+    const { menuData } = this.props;
+    this.breadcrumbNameMap = getBreadcrumbNameMap(menuData);
+  }
+
+  componentWillUnmount() {
+    cancelAnimationFrame(this.renderRef);
+  }
+
   getContext() {
     const { location } = this.props;
     return {
@@ -81,10 +100,7 @@ class BasicLayout extends React.PureComponent {
       breadcrumbNameMap: this.breadcrumbNameMap,
     };
   }
-  componentDidUpdate() {
-    const { menuData } = this.props;
-    this.breadcrumbNameMap = getBreadcrumbNameMap(menuData);
-  }
+
   getPageTitle = pathname => {
     let currRouterData = null;
     // match params path
@@ -149,16 +165,7 @@ class BasicLayout extends React.PureComponent {
       payload: collapsed,
     });
   };
-  componentDidMount() {
-    this.renderRef = requestAnimationFrame(() => {
-      this.setState({
-        rendering: false,
-      });
-    });
-  }
-  componentWillUnmount() {
-    cancelAnimationFrame(this.renderRef);
-  }
+
   render() {
     const {
       isMobile,

src/pages/Account/Settings/Info.js

@@ -41,15 +41,6 @@ export default class Info extends Component {
     });
   }
 
-  componentDidMount() {
-    window.addEventListener('resize', this.resize);
-    this.resize();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-  }
-
   static getDerivedStateFromProps(props, state) {
     const { match, location } = props;
     let selectKey = location.pathname.replace(`${match.path}/`, '');
@@ -60,6 +51,15 @@ export default class Info extends Component {
     return null;
   }
 
+  componentDidMount() {
+    window.addEventListener('resize', this.resize);
+    this.resize();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
   getmenu = () => {
     const { menuMap } = this.state;
     return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);

src/pages/Forms/TableForm.js

@@ -4,9 +4,6 @@ import isEqual from 'lodash.isequal';
 import styles from './style.less';
 
 export default class TableForm extends PureComponent {
-  index = 0;
-
-  cacheOriginData = {};
 
   constructor(props) {
     super(props);
@@ -29,6 +26,10 @@ export default class TableForm extends PureComponent {
     };
   }
 
+  index = 0;
+
+  cacheOriginData = {};
+
   getRowByKey(key, newData) {
     const { data } = this.state;
     return (newData || data).filter(item => item.key === key)[0];

src/pages/List/BasicList.js

@@ -38,10 +38,6 @@ const { Search, TextArea } = Input;
 }))
 @Form.create()
 export default class BasicList extends PureComponent {
-  formLayout = {
-    labelCol: { span: 7 },
-    wrapperCol: { span: 13 },
-  };
 
   state = { visible: false, done: false };
 
@@ -55,6 +51,11 @@ export default class BasicList extends PureComponent {
     });
   }
 
+  formLayout = {
+    labelCol: { span: 7 },
+    wrapperCol: { span: 13 },
+  };
+
   showModal = () => {
     this.setState({
       visible: true,

src/pages/List/TableList.js

@@ -272,6 +272,22 @@ class UpdateForm extends PureComponent {
 }))
 @Form.create()
 export default class TableList extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    stepFormValues: {},
+  };
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'rule/fetch',
+    });
+  }
+
   columns = [
     {
       title: '规则名称',
@@ -333,22 +349,6 @@ export default class TableList extends PureComponent {
     },
   ];
 
-  state = {
-    modalVisible: false,
-    updateModalVisible: false,
-    expandForm: false,
-    selectedRows: [],
-    formValues: {},
-    stepFormValues: {},
-  };
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/fetch',
-    });
-  }
-
   handleStandardTableChange = (pagination, filtersArg, sorter) => {
     const { dispatch } = this.props;
     const { formValues } = this.state;