diff --git a/.eslintrc.js b/.eslintrc.js
index 76b261a1f0..928981c50d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,6 +26,8 @@ const eslintrc = {
     'react/sort-comp': 0,
     'react/prop-types': 0,
     'react/jsx-first-prop-new-line': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'react/forbid-prop-types': 0,
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
     'import/extensions': 0,
     'import/no-unresolved': 0,
diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.js
index f2737259ab..cd5124af55 100644
--- a/components/affix/__tests__/Affix.test.js
+++ b/components/affix/__tests__/Affix.test.js
@@ -11,9 +11,11 @@ class AffixMounter extends React.Component {
       events[event] = cb;
     });
   }
+
   getTarget = () => {
     return this.container;
   }
+
   render() {
     return (
       <div
@@ -35,7 +37,7 @@ class AffixMounter extends React.Component {
             ref={ele => this.affix = ele}
             {...this.props}
           >
-            <Button type="primary" >
+            <Button type="primary">
               Fixed at the top of container
             </Button>
           </Affix>
diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js
index 49ee1e676d..d6e2542294 100644
--- a/components/button/__tests__/index.test.js
+++ b/components/button/__tests__/index.test.js
@@ -44,7 +44,7 @@ describe('Button', () => {
   });
 
   it('renders Chinese characters correctly in HOC', () => {
-    const Text = props => <span>{props.children}</span>;
+    const Text = ({ children }) => <span>{children}</span>;
     const wrapper = mount(
       <Button><Text>按钮</Text></Button>
     );
@@ -74,11 +74,14 @@ describe('Button', () => {
       state = {
         loading: false,
       };
+
       enterLoading = () => {
         this.setState({ loading: true });
       }
+
       render() {
-        return <Button loading={this.state.loading} onClick={this.enterLoading}>Button</Button>;
+        const { loading } = this.state;
+        return <Button loading={loading} onClick={this.enterLoading}>Button</Button>;
       }
     }
     const wrapper = mount(
@@ -94,11 +97,14 @@ describe('Button', () => {
       state = {
         loading: false,
       };
+
       enterLoading = () => {
         this.setState({ loading: { delay: 1000 } });
       }
+
       render() {
-        return <Button loading={this.state.loading} onClick={this.enterLoading}>Button</Button>;
+        const { loading } = this.state;
+        return <Button loading={loading} onClick={this.enterLoading}>Button</Button>;
       }
     }
     const wrapper = mount(
diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js
index d7de7f5316..10665e4d22 100644
--- a/components/date-picker/__tests__/DatePicker.test.js
+++ b/components/date-picker/__tests__/DatePicker.test.js
@@ -78,7 +78,7 @@ describe('DatePicker', () => {
       }
 
       onChange = (value) => {
-        let cleared = this.state.cleared;
+        let { cleared } = this.state;
 
         if (cleared) {
           value = moment(moment(value).format('YYYY-MM-DD 12:12:12'));
@@ -93,10 +93,11 @@ describe('DatePicker', () => {
       }
 
       render() {
+        const { value } = this.state;
         return (
           <DatePicker
             showTime
-            value={this.state.value}
+            value={value}
             format="YYYY-MM-DD HH:mm:ss"
             onChange={this.onChange}
           />
diff --git a/components/date-picker/__tests__/RangePicker.test.js b/components/date-picker/__tests__/RangePicker.test.js
index 7f603ab54f..0678230a71 100644
--- a/components/date-picker/__tests__/RangePicker.test.js
+++ b/components/date-picker/__tests__/RangePicker.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
 import moment from 'moment';
-import DatePicker from '../';
+import DatePicker from '..';
 import { setMockDate, resetMockDate } from '../../../tests/utils';
 import { selectDate } from './utils';
 import focusTest from '../../../tests/shared/focusTest';
@@ -211,8 +211,8 @@ describe('RangePicker', () => {
     selectDate(wrapper, moment('2017-09-18'), 0);
     selectDate(wrapper, moment('2017-10-18'), 1);
     wrapper.find('.ant-calendar-picker-input').simulate('click');
-    expect(() =>
+    expect(() => (
       wrapper.find('.ant-calendar-input').at(1).simulate('change', { target: { value: '2016-01-01' } })
-    ).not.toThrow();
+    )).not.toThrow();
   });
 });
diff --git a/components/date-picker/__tests__/other.test.js b/components/date-picker/__tests__/other.test.js
index 5423ee1ce1..e674637c84 100644
--- a/components/date-picker/__tests__/other.test.js
+++ b/components/date-picker/__tests__/other.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
 import moment from 'moment';
-import DatePicker from '../';
+import DatePicker from '..';
 
 const { MonthPicker, WeekPicker } = DatePicker;
 
diff --git a/components/date-picker/__tests__/showTime.test.js b/components/date-picker/__tests__/showTime.test.js
index f9d1b812d6..3c0757c7b3 100644
--- a/components/date-picker/__tests__/showTime.test.js
+++ b/components/date-picker/__tests__/showTime.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import DatePicker from '../';
+import DatePicker from '..';
 
 const { RangePicker } = DatePicker;
 
diff --git a/components/dropdown/__tests__/dropdown-button.test.js b/components/dropdown/__tests__/dropdown-button.test.js
index edcd27eee9..534f3721b6 100644
--- a/components/dropdown/__tests__/dropdown-button.test.js
+++ b/components/dropdown/__tests__/dropdown-button.test.js
@@ -24,7 +24,7 @@ describe('DropdownButton', () => {
     const dropdownProps = wrapper.find(Dropdown).props();
 
     Object.keys(props).forEach((key) => {
-      expect(dropdownProps[key]).toBe(props[key]);
+      expect(dropdownProps[key]).toBe(props[key]); // eslint-disable-line
     });
   });
 
diff --git a/components/input/__tests__/Search.test.js b/components/input/__tests__/Search.test.js
index 90d65acab6..21a7b31b4e 100644
--- a/components/input/__tests__/Search.test.js
+++ b/components/input/__tests__/Search.test.js
@@ -9,7 +9,7 @@ describe('Input.Search', () => {
 
   it('should support custom button', () => {
     const wrapper = mount(
-      <Search enterButton={<button>ok</button>} />
+      <Search enterButton={<button type="button">ok</button>} />
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
@@ -71,7 +71,7 @@ describe('Input.Search', () => {
   it('should trigger onSearch when click search button of native', () => {
     const onSearch = jest.fn();
     const wrapper = mount(
-      <Search defaultValue="search text" enterButton={<button>antd button</button>} onSearch={onSearch} />
+      <Search defaultValue="search text" enterButton={<button type="button">antd button</button>} onSearch={onSearch} />
     );
     wrapper.find('button').simulate('click');
     expect(onSearch).toHaveBeenCalledTimes(1);
diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js
index 7f48b3ca18..3b511530b4 100644
--- a/components/input/__tests__/index.test.js
+++ b/components/input/__tests__/index.test.js
@@ -60,10 +60,12 @@ describe('As Form Control', () => {
   it('should be reset when wrapped in form.getFieldDecorator without initialValue', () => {
     class Demo extends React.Component {
       reset = () => {
-        this.props.form.resetFields();
+        const { form } = this.props;
+        form.resetFields();
       }
+
       render() {
-        const { getFieldDecorator } = this.props.form;
+        const { form: { getFieldDecorator } } = this.props;
         return (
           <Form>
             <Form.Item>
@@ -72,7 +74,7 @@ describe('As Form Control', () => {
             <Form.Item>
               {getFieldDecorator('textarea')(<Input.TextArea />)}
             </Form.Item>
-            <button onClick={this.reset}>reset</button>
+            <button type="button" onClick={this.reset}>reset</button>
           </Form>
         );
       }
diff --git a/components/list/__tests__/pagination.test.js b/components/list/__tests__/pagination.test.js
index cf10379e9b..063387cb8d 100644
--- a/components/list/__tests__/pagination.test.js
+++ b/components/list/__tests__/pagination.test.js
@@ -19,7 +19,7 @@ describe('List.pagination', () => {
         pagination={pagination}
         dataSource={data}
         renderItem={item => (
-          <List.Item key={item.key} >
+          <List.Item key={item.key}>
             {item.name}
           </List.Item>
         )}
diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js
index 778840d982..b322a4cbff 100644
--- a/components/locale-provider/__tests__/index.test.js
+++ b/components/locale-provider/__tests__/index.test.js
@@ -4,7 +4,7 @@ import { mount } from 'enzyme';
 import moment from 'moment';
 import MockDate from 'mockdate';
 import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
-  Popconfirm, Table, Modal, Select, Transfer } from '../../';
+  Popconfirm, Table, Modal, Select, Transfer } from '../..';
 import enGB from '../en_GB';
 import frFR from '../fr_FR';
 import nlBE from '../nl_BE';
@@ -113,6 +113,7 @@ describe('Locale Provider', () => {
           title: 'Hello World!',
         });
       }
+
       render() {
         return null;
       }
@@ -142,8 +143,9 @@ describe('Locale Provider', () => {
       }
 
       render() {
+        const { locale } = this.state;
         return (
-          <LocaleProvider locale={this.state.locale}>
+          <LocaleProvider locale={locale}>
             <div>
               <DatePicker defaultValue={moment()} open />
             </div>
diff --git a/components/message/__tests__/index.test.js b/components/message/__tests__/index.test.js
index 7b39508892..6f86fb57dd 100644
--- a/components/message/__tests__/index.test.js
+++ b/components/message/__tests__/index.test.js
@@ -103,6 +103,7 @@ describe('message', () => {
       componentDidMount() {
         hide = message.loading('Action in progress..', 0);
       }
+
       render() {
         return <div>test</div>;
       }
@@ -123,6 +124,7 @@ describe('message', () => {
         message.loading('Action in progress2..', 0);
         setTimeout(() => message.destroy(), 1000);
       }
+
       render() {
         return <div>test</div>;
       }
diff --git a/components/modal/__tests__/Modal.test.js b/components/modal/__tests__/Modal.test.js
index a7a0218671..c4410d9e5a 100644
--- a/components/modal/__tests__/Modal.test.js
+++ b/components/modal/__tests__/Modal.test.js
@@ -9,22 +9,27 @@ class ModalTester extends React.Component {
     super(props);
     this.state = { visible: false };
   }
+
   componentDidMount() {
     this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state
   }
+
   saveContainer = (container) => {
     this.container = container;
   }
+
   getContainer = () => {
     return this.container;
   }
+
   render() {
+    const { visible } = this.state;
     return (
       <div>
         <div ref={this.saveContainer} />
         <Modal
           {...this.props}
-          visible={this.state.visible}
+          visible={visible}
           getContainer={this.getContainer}
         >
           Here is content of Modal
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
index ecc8f19ccd..af118d12f3 100644
--- a/components/table/__tests__/Table.filter.test.js
+++ b/components/table/__tests__/Table.filter.test.js
@@ -239,6 +239,7 @@ describe('Table.filter', () => {
       }
 
       render() {
+        const { filters } = this.state;
         return (
           <Table dataSource={data} onChange={this.handleChange}>
             <Column
@@ -249,7 +250,7 @@ describe('Table.filter', () => {
                 { text: 'Jack', value: 'Jack' },
                 { text: 'Lucy', value: 'Lucy' },
               ]}
-              filteredValue={this.state.filters.name}
+              filteredValue={filters.name}
               onFilter={filterFn}
             />
           </Table>
diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js
index 015c080c0e..edf28d361b 100644
--- a/components/table/__tests__/Table.rowSelection.test.js
+++ b/components/table/__tests__/Table.rowSelection.test.js
@@ -306,13 +306,15 @@ describe('Table.rowSelection', () => {
       state = {
         disableName: 'Jack',
       };
+
       render() {
+        const { disableName } = this.state;
         return (
           <Table
             columns={columns}
             dataSource={data}
             rowSelection={{
-              getCheckboxProps: record => ({ disabled: record.name === this.state.disableName }),
+              getCheckboxProps: record => ({ disabled: record.name === disableName }),
             }}
           />
         );
diff --git a/components/time-picker/__tests__/index.test.js b/components/time-picker/__tests__/index.test.js
index 16e44445be..48084c6c11 100644
--- a/components/time-picker/__tests__/index.test.js
+++ b/components/time-picker/__tests__/index.test.js
@@ -8,7 +8,7 @@ describe('TimePicker', () => {
   focusTest(TimePicker);
 
   it('renders addon correctly', () => {
-    const addon = () => (<button>Ok</button>);
+    const addon = () => (<button type="button">Ok</button>);
     const wrapper = mount(<TimePicker addon={addon} />);
     const rcTimePicker = wrapper.find(RcTimePicker);
     const addonWrapper = render(rcTimePicker.props().addon());
diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.js
index 063479ad09..fcfaad6582 100644
--- a/components/tooltip/__tests__/tooltip.test.js
+++ b/components/tooltip/__tests__/tooltip.test.js
@@ -14,7 +14,9 @@ describe('Tooltip', () => {
         mouseLeaveDelay={0}
         onVisibleChange={onVisibleChange}
       >
-        <div id="hello">Hello world!</div>
+        <div id="hello">
+          Hello world!
+        </div>
       </Tooltip>
     );
 
@@ -60,7 +62,7 @@ describe('Tooltip', () => {
         mouseLeaveDelay={0}
         onVisibleChange={onVisibleChange}
       >
-        <button disabled>Hello world!</button>
+        <button type="button" disabled>Hello world!</button>
       </Tooltip>
     );
 
@@ -122,7 +124,7 @@ describe('Tooltip', () => {
         mouseEnterDelay={0}
         mouseLeaveDelay={0}
       >
-        <button disabled>Hello world!</button>
+        <button type="button" disabled>Hello world!</button>
       </Tooltip>
     );
 
@@ -143,7 +145,7 @@ describe('Tooltip', () => {
           mouseLeaveDelay={0}
           placement="bottomLeft"
         >
-          <button style={{ width: triggerWidth }}>
+          <button type="button" style={{ width: triggerWidth }}>
             Hello world!
           </button>
         </Tooltip>
@@ -160,7 +162,7 @@ describe('Tooltip', () => {
           placement="bottomLeft"
           arrowPointAtCenter
         >
-          <button style={{ width: triggerWidth }}>
+          <button type="button" style={{ width: triggerWidth }}>
             Hello world!
           </button>
         </Tooltip>
diff --git a/components/transfer/__tests__/index.test.js b/components/transfer/__tests__/index.test.js
index dacb3ae9cc..d8b274191a 100644
--- a/components/transfer/__tests__/index.test.js
+++ b/components/transfer/__tests__/index.test.js
@@ -214,12 +214,12 @@ describe('Transfer', () => {
   });
 
   it('should check correctly when there is a search text', () => {
-    const props = { ...listCommonProps };
-    delete props.targetKeys;
-    delete props.selectedKeys;
+    const newProps = { ...listCommonProps };
+    delete newProps.targetKeys;
+    delete newProps.selectedKeys;
     const handleSelectChange = jest.fn();
     const wrapper = mount(
-      <Transfer {...props} showSearch onSelectChange={handleSelectChange} render={item => item.title} />
+      <Transfer {...newProps} showSearch onSelectChange={handleSelectChange} render={item => item.title} />
     );
     wrapper.find(TransferItem).filterWhere(n => n.prop('item').key === 'b').simulate('click');
     expect(handleSelectChange).toHaveBeenLastCalledWith(['b'], []);
diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js
index 6901294df6..40539bdb84 100644
--- a/components/upload/__tests__/upload.test.js
+++ b/components/upload/__tests__/upload.test.js
@@ -16,6 +16,7 @@ describe('Upload', () => {
       componentDidMount() {
         ref = this.refs.input;
       }
+
       render() {
         return (
           <Upload supportServerRender={false}>
@@ -32,9 +33,9 @@ describe('Upload', () => {
     const data = jest.fn();
     const props = {
       action: 'http://upload.com',
-      beforeUpload: () => new Promise(resolve =>
+      beforeUpload: () => new Promise(resolve => (
         setTimeout(() => resolve('success'), 100)
-      ),
+      )),
       data,
       onChange: ({ file }) => {
         if (file.status !== 'uploading') {
@@ -46,7 +47,7 @@ describe('Upload', () => {
 
     const wrapper = mount(
       <Upload {...props}>
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
 
@@ -83,7 +84,7 @@ describe('Upload', () => {
 
     const wrapper = mount(
       <Upload {...props}>
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
 
@@ -118,7 +119,7 @@ describe('Upload', () => {
 
     const wrapper = mount(
       <Upload {...props}>
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
 
@@ -147,7 +148,7 @@ describe('Upload', () => {
 
     const wrapper = mount(
       <Upload {...props}>
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
 
diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js
index c6e00c78ad..41d92301bc 100644
--- a/components/upload/__tests__/uploadlist.test.js
+++ b/components/upload/__tests__/uploadlist.test.js
@@ -29,7 +29,7 @@ describe('Upload List', () => {
   it('should use file.thumbUrl for <img /> in priority', () => {
     const wrapper = mount(
       <Upload defaultFileList={fileList} listType="picture">
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
     fileList.forEach((file, i) => {
@@ -57,7 +57,7 @@ describe('Upload List', () => {
     }];
     const wrapper = mount(
       <Upload defaultFileList={list}>
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
     expect(wrapper.find('.ant-upload-list-item').length).toBe(2);
@@ -84,7 +84,7 @@ describe('Upload List', () => {
         onChange={onChange}
         customRequest={successRequest}
       >
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
     wrapper.find('input').simulate('change', {
@@ -110,7 +110,7 @@ describe('Upload List', () => {
         onChange={onChange}
         customRequest={errorRequest}
       >
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
     wrapper.find('input').simulate('change', {
@@ -131,7 +131,7 @@ describe('Upload List', () => {
         onChange={handleChange}
         beforeUpload={() => false}
       >
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
 
@@ -152,15 +152,14 @@ describe('Upload List', () => {
     let errors;
     class TestForm extends React.Component {
       handleSubmit = () => {
-        const { validateFields } = this.props.form;
+        const { form: { validateFields } } = this.props;
         validateFields((err) => {
           errors = err;
         });
       }
 
       render() {
-        const { getFieldDecorator } = this.props.form;
-
+        const { form: { getFieldDecorator } } = this.props;
         return (
           <Form onSubmit={this.handleSubmit}>
             <Form.Item>
@@ -183,7 +182,7 @@ describe('Upload List', () => {
                 <Upload
                   beforeUpload={() => false}
                 >
-                  <button>upload</button>
+                  <button type="button">upload</button>
                 </Upload>
               )}
             </Form.Item>
@@ -216,7 +215,7 @@ describe('Upload List', () => {
         defaultFileList={fileList}
         onPreview={handlePreview}
       >
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
     wrapper.find('.anticon-eye-o').at(0).simulate('click');
@@ -235,7 +234,7 @@ describe('Upload List', () => {
         onRemove={handleRemove}
         onChange={handleChange}
       >
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
     wrapper.find('.anticon-delete').at(0).simulate('click');
@@ -258,7 +257,7 @@ describe('Upload List', () => {
         defaultFileList={newFileList}
         onPreview={handlePreview}
       >
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
     wrapper.setState({});
@@ -332,7 +331,7 @@ describe('Upload List', () => {
         listType="picture"
         defaultFileList={list}
       >
-        <button>upload</button>
+        <button type="button">upload</button>
       </Upload>
     );
     expect(wrapper.render()).toMatchSnapshot();
diff --git a/scripts/sort-api-table.js b/scripts/sort-api-table.js
index 7f6acf2c8e..a8853f9545 100644
--- a/scripts/sort-api-table.js
+++ b/scripts/sort-api-table.js
@@ -55,9 +55,9 @@ function alphabetSort(nodes) {
 function sizeSort(nodes) {
   return nodes.sort((...comparison) => {
     return asciiSort(
-      ...comparison.map(val =>
+      ...comparison.map(val => (
         sizeBreakPoints.indexOf(getCellValue(val).toLowerCase())
-      )
+      ))
     );
   });
 }
diff --git a/site/bisheng.config.js b/site/bisheng.config.js
index c01fefb01a..4d7bcaf3cd 100644
--- a/site/bisheng.config.js
+++ b/site/bisheng.config.js
@@ -13,9 +13,9 @@ function alertBabelConfig(rules) {
       if (rule.options.plugins.indexOf(replaceLib) === -1) {
         rule.options.plugins.push(replaceLib);
       }
-      rule.options.plugins = rule.options.plugins.filter(plugin =>
+      rule.options.plugins = rule.options.plugins.filter(plugin => (
         !plugin.indexOf || plugin.indexOf('babel-plugin-add-module-exports') === -1
-      );
+      ));
     } else if (rule.use) {
       alertBabelConfig(rule.use);
     }
diff --git a/site/theme/index.js b/site/theme/index.js
index ac1f865b4f..44f77e123d 100644
--- a/site/theme/index.js
+++ b/site/theme/index.js
@@ -10,8 +10,8 @@ function pickerGenerator(module) {
   const tester = new RegExp(`^docs/${module}`);
   return (markdownData) => {
     const { filename } = markdownData.meta;
-    if (tester.test(filename) &&
-        !/\/demo$/.test(path.dirname(filename))) {
+    if (tester.test(filename)
+        && !/\/demo$/.test(path.dirname(filename))) {
       return {
         meta: markdownData.meta,
       };
@@ -29,8 +29,8 @@ module.exports = {
   pick: {
     components(markdownData) {
       const { filename } = markdownData.meta;
-      if (!/^components/.test(filename) ||
-          /[/\\]demo$/.test(path.dirname(filename))) return;
+      if (!/^components/.test(filename)
+          || /[/\\]demo$/.test(path.dirname(filename))) return;
 
       return {
         meta: markdownData.meta,
diff --git a/site/theme/template/Color/ColorBlock.jsx b/site/theme/template/Color/ColorBlock.jsx
index 253fa4a266..8e9bfcd454 100644
--- a/site/theme/template/Color/ColorBlock.jsx
+++ b/site/theme/template/Color/ColorBlock.jsx
@@ -11,10 +11,12 @@ export default class ColorBlock extends Component {
       fontWeight: index === 6 ? 'bold' : 'normal',
     };
   }
+
   onCopied = () => {
     const { color } = this.props;
     message.success(`Copied: ${color}`);
   }
+
   render() {
     const { color, index } = this.props;
     return (
diff --git a/site/theme/template/Color/ColorPaletteTool.jsx b/site/theme/template/Color/ColorPaletteTool.jsx
index f7a4af067e..f9f3e59193 100644
--- a/site/theme/template/Color/ColorPaletteTool.jsx
+++ b/site/theme/template/Color/ColorPaletteTool.jsx
@@ -36,24 +36,25 @@ export default class ColorPaletteTool extends Component {
   }
 
   render() {
+    const { primaryColor } = this.state;
     return (
       <div className="color-palette-horizontal">
         <div className="color-palette-pick">
           <FormattedMessage id="app.docs.color.pick-primary" />
         </div>
         <div className="main-color">
-          <ColorPatterns color={this.state.primaryColor} />
+          <ColorPatterns color={primaryColor} />
         </div>
         <div className="color-palette-picker">
           <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
             <ColorPicker
               type="chrome"
-              color={this.state.primaryColor}
+              color={primaryColor}
               onChange={this.handleChangeColor}
             />
           </span>
           <span className="color-palette-picker-value">
-            {this.state.primaryColor}
+            {primaryColor}
           </span>
           {this.renderColorValidation()}
         </div>
diff --git a/site/theme/template/Color/ColorPicker.jsx b/site/theme/template/Color/ColorPicker.jsx
index b93a699f62..fa9aa37b89 100644
--- a/site/theme/template/Color/ColorPicker.jsx
+++ b/site/theme/template/Color/ColorPicker.jsx
@@ -22,34 +22,42 @@ export default class ColorPicker extends Component {
       color: props.color,
     };
   }
+
   componentWillReceiveProps(nextProps) {
     this.setState({ color: nextProps.color });
   }
+
   handleClick = () => {
-    this.setState({ displayColorPicker: !this.state.displayColorPicker });
+    const { displayColorPicker } = this.state;
+    this.setState({ displayColorPicker: !displayColorPicker });
   };
+
   handleClose = () => {
     this.setState({ displayColorPicker: false });
   };
+
   handleChange = (color) => {
+    const { onChange } = this.props;
     this.setState({ color: color.hex });
-    this.props.onChange(color.hex, color);
+    onChange(color.hex, color);
   };
+
   handleChangeComplete = (color) => {
+    const { onChangeComplete } = this.props;
     this.setState({ color: color.hex });
-    this.props.onChangeComplete(color.hex);
+    onChangeComplete(color.hex);
   };
+
   render() {
     const { small, type, position } = this.props;
-
+    const { color, displayColorPicker } = this.state;
     const Picker = pickers[type];
-
     const styles = {
       color: {
         width: small ? '80px' : '120px',
         height: small ? '16px' : '24px',
         borderRadius: '2px',
-        background: this.state.color,
+        background: color,
       },
       swatch: {
         padding: '4px',
@@ -86,13 +94,13 @@ export default class ColorPicker extends Component {
         <div style={styles.color} />
       </div>
     );
-    const picker = this.state.displayColorPicker ? (
+    const picker = displayColorPicker ? (
       <div style={styles.popover}>
         <div style={styles.cover} onClick={this.handleClose} />
         <div style={styles.wrapper}>
           <Picker
             {...this.props}
-            color={this.state.color}
+            color={color}
             onChange={this.handleChange}
             onChangeComplete={this.handleChangeComplete}
           />
diff --git a/site/theme/template/Color/Palette.jsx b/site/theme/template/Color/Palette.jsx
index 6db0f294b1..8bf6a8390b 100644
--- a/site/theme/template/Color/Palette.jsx
+++ b/site/theme/template/Color/Palette.jsx
@@ -26,10 +26,10 @@ export default class Palette extends React.Component {
     });
     this.forceUpdate();
   }
+
   render() {
     this.colorNodes = this.colorNodes || {};
-    const { showTitle, direction } = this.props;
-    const { name, description, english, chinese } = this.props.color;
+    const { showTitle, direction, color: { name, description, english, chinese } } = this.props;
     const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette';
     const colors = [];
     const colorName = `${english} / ${chinese}`;
diff --git a/site/theme/template/Content/Article.jsx b/site/theme/template/Content/Article.jsx
index 02b7e65dd5..80b19fe4e9 100644
--- a/site/theme/template/Content/Article.jsx
+++ b/site/theme/template/Content/Article.jsx
@@ -12,6 +12,7 @@ export default class Article extends React.Component {
   static contextTypes = {
     intl: PropTypes.object.isRequired,
   }
+
   componentDidMount() {
     // Add ga event click
     this.delegation = delegate(this.node, '.resource-card', 'click', (e) => {
@@ -21,6 +22,7 @@ export default class Article extends React.Component {
     }, false);
     this.componentDidUpdate();
   }
+
   componentDidUpdate() {
     const links = [...document.querySelectorAll('.outside-link.internal')];
     if (links.length === 0) {
@@ -34,12 +36,14 @@ export default class Article extends React.Component {
       }
     });
   }
+
   componentWillUnmount() {
     clearTimeout(this.pingTimer);
     if (this.delegation) {
       this.delegation.destroy();
     }
   }
+
   getArticle(article) {
     const { content } = this.props;
     const { meta } = content;
@@ -64,13 +68,13 @@ export default class Article extends React.Component {
       children: <Timeline>{timelineItems}</Timeline>,
     });
   }
+
   render() {
     const { props } = this;
     const { content } = props;
-
     const { meta, description } = content;
     const { title, subtitle, filename } = meta;
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
     const isNotTranslated = locale === 'en-US' && typeof title === 'object';
     return (
       <DocumentTitle title={`${title[locale] || title} - Ant Design`}>
@@ -89,26 +93,29 @@ export default class Article extends React.Component {
           <h1>
             {title[locale] || title}
             {
-              !subtitle || locale === 'en-US' ? null :
-              <span className="subtitle">{subtitle}</span>
+              !subtitle || locale === 'en-US'
+                ? null
+                : <span className="subtitle">{subtitle}</span>
             }
             <EditButton title={<FormattedMessage id="app.content.edit-page" />} filename={filename} />
           </h1>
           {
-            !description ? null :
-              props.utils.toReactComponent(
+            !description
+              ? null
+              : props.utils.toReactComponent(
                 ['section', { className: 'markdown' }].concat(getChildren(description))
               )
           }
           {
-            (!content.toc || content.toc.length <= 1 || meta.toc === false) ? null :
-            <Affix className="toc-affix" offsetTop={16}>
-              {
-                props.utils.toReactComponent(
-                  ['ul', { className: 'toc' }].concat(getChildren(content.toc))
-                )
-              }
-            </Affix>
+            (!content.toc || content.toc.length <= 1 || meta.toc === false) ? null : (
+              <Affix className="toc-affix" offsetTop={16}>
+                {
+                  props.utils.toReactComponent(
+                    ['ul', { className: 'toc' }].concat(getChildren(content.toc))
+                  )
+                }
+              </Affix>
+            )
           }
           {
             this.getArticle(props.utils.toReactComponent(
diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx
index 963cbec2bb..ecd90d5241 100644
--- a/site/theme/template/Content/ComponentDoc.jsx
+++ b/site/theme/template/Content/ComponentDoc.jsx
@@ -22,8 +22,9 @@ export default class ComponentDoc extends React.Component {
   }
 
   handleExpandToggle = () => {
+    const { expandAll } = this.state;
     this.setState({
-      expandAll: !this.state.expandAll,
+      expandAll: !expandAll,
     });
   }
 
@@ -31,15 +32,15 @@ export default class ComponentDoc extends React.Component {
     const { props } = this;
     const { doc, location } = props;
     const { content, meta } = doc;
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
     const demos = Object.keys(props.demos).map(key => props.demos[key]);
-    const expand = this.state.expandAll;
+    const { expandAll: { expand } } = this.state;
 
     const isSingleCol = meta.cols === 1;
     const leftChildren = [];
     const rightChildren = [];
-    const showedDemo = demos.some(demo => demo.meta.only) ?
-      demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview);
+    const showedDemo = demos.some(demo => demo.meta.only)
+      ? demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview);
     showedDemo.sort((a, b) => a.meta.order - b.meta.order)
       .forEach((demoData, index) => {
         const demoElem = (
@@ -109,9 +110,10 @@ export default class ComponentDoc extends React.Component {
           </section>
           <Row gutter={16}>
             <Col span={isSingleCol ? '24' : '12'}
-              className={isSingleCol ?
-                'code-boxes-col-1-1' :
-                'code-boxes-col-2-1'
+              className={
+                isSingleCol
+                  ? 'code-boxes-col-1-1'
+                  : 'code-boxes-col-2-1'
               }
             >
               {leftChildren}
diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx
index 410dc5a534..e34b57e586 100644
--- a/site/theme/template/Content/Demo.jsx
+++ b/site/theme/template/Content/Demo.jsx
@@ -43,9 +43,11 @@ export default class Demo extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    return (this.state.codeExpand || this.props.expand) !== (nextState.codeExpand || nextProps.expand)
-      || this.state.copied !== nextState.copied
-      || this.state.copyTooltipVisible !== nextState.copyTooltipVisible;
+    const { codeExpand, copied, copyTooltipVisible } = this.state;
+    const { expand } = this.props;
+    return (codeExpand || expand) !== (nextState.codeExpand || nextProps.expand)
+      || copied !== nextState.copied
+      || copyTooltipVisible !== nextState.copyTooltipVisible;
   }
 
   componentDidMount() {
@@ -65,7 +67,8 @@ export default class Demo extends React.Component {
   }
 
   handleCodeExpand = () => {
-    this.setState({ codeExpand: !this.state.codeExpand });
+    const { codeExpand } = this.state;
+    this.setState({ codeExpand: !codeExpand });
   }
 
   saveAnchor = (anchor) => {
@@ -102,6 +105,7 @@ export default class Demo extends React.Component {
       highlightedStyle,
       expand,
     } = props;
+    const { showRiddleButton, copied } = state;
     if (!this.liveDemo) {
       this.liveDemo = meta.iframe
         ? <BrowserFrame><iframe src={src} height={meta.iframe} title="demo" /></BrowserFrame>
@@ -112,8 +116,7 @@ export default class Demo extends React.Component {
       'code-box': true,
       expand: codeExpand,
     });
-
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
     const localizedTitle = meta.title[locale] || meta.title;
     const localizeIntro = content[locale] || content;
     const introChildren = props.utils
@@ -186,9 +189,9 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
         <section className="code-box-demo">
           {this.liveDemo}
           {
-            style ?
-              <style dangerouslySetInnerHTML={{ __html: style }} /> :
-              null
+            style
+              ? <style dangerouslySetInnerHTML={{ __html: style }} />
+              : null
           }
         </section>
         <section className="code-box-meta markdown">
@@ -222,7 +225,7 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
         >
           <div className="highlight">
             <div className="code-box-actions">
-              {this.state.showRiddleButton ? (
+              {showRiddleButton ? (
                 <form action="//riddle.alibaba-inc.com/riddles/define" method="POST" target="_blank">
                   <input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
                   <Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
@@ -249,11 +252,11 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
                 <Tooltip
                   visible={state.copyTooltipVisible}
                   onVisibleChange={this.onCopyTooltipVisibleChange}
-                  title={
+                  title={(
                     <FormattedMessage
-                      id={`app.demo.${state.copied ? 'copied' : 'copy'}`}
+                      id={`app.demo.${copied ? 'copied' : 'copy'}`}
                     />
-                  }
+                  )}
                 >
                   <Icon
                     type={(state.copied && state.copyTooltipVisible) ? 'check' : 'copy'}
@@ -265,13 +268,14 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
             {props.utils.toReactComponent(highlightedCode)}
           </div>
           {
-            highlightedStyle ?
-              <div key="style" className="highlight">
-                <pre>
-                  <code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
-                </pre>
-              </div> :
-              null
+            highlightedStyle
+              ? (
+                <div key="style" className="highlight">
+                  <pre>
+                    <code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
+                  </pre>
+                </div>
+              ) : null
           }
         </section>
       </section>
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index 7183b2a23e..3c215c297b 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -12,18 +12,18 @@ const { SubMenu } = Menu;
 
 function getActiveMenuItem(props) {
   const { children } = props.params;
-  return (children && children.replace('-cn', '')) ||
-    props.location.pathname.replace(/(^\/|-cn$)/g, '');
+  return (children && children.replace('-cn', ''))
+    || props.location.pathname.replace(/(^\/|-cn$)/g, '');
 }
 
 function getModuleData(props) {
   const { pathname } = props.location;
-  const moduleName = /^\/?components/.test(pathname) ?
-    'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
-  const moduleData = moduleName === 'components' || moduleName === 'docs/react' ||
-    moduleName === 'changelog' || moduleName === 'changelog-cn' ?
-    [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
-    props.picked[moduleName];
+  const moduleName = /^\/?components/.test(pathname)
+    ? 'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
+  const moduleData = moduleName === 'components' || moduleName === 'docs/react'
+    || moduleName === 'changelog' || moduleName === 'changelog-cn'
+    ? [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog]
+    : props.picked[moduleName];
   const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md';
   return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));
 }
@@ -58,10 +58,11 @@ export default class MainContent extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (!prevProps || prevProps.location.pathname !== this.props.location.pathname) {
+    const { location } = this.props;
+    if (!prevProps || prevProps.location.pathname !== location.pathname) {
       this.bindScroller();
     }
-    if (!prevProps || (!window.location.hash && prevProps && prevProps.location.pathname !== this.props.location.pathname)) {
+    if (!prevProps || (!window.location.hash && prevProps && prevProps.location.pathname !== location.pathname)) {
       document.body.scrollTop = 0;
       document.documentElement.scrollTop = 0;
       return;
@@ -130,7 +131,7 @@ export default class MainContent extends React.Component {
   }
 
   generateMenuItem(isTop, item) {
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
     const key = fileNameToPath(item.filename);
     const title = item.title[locale] || item.title;
     const text = isTop ? title : [
@@ -165,10 +166,11 @@ export default class MainContent extends React.Component {
 
   getMenuItems() {
     const { themeConfig } = this.props;
+    const { intl: { locale } } = this.context;
     const moduleData = getModuleData(this.props);
     const menuItems = utils.getMenuItems(
       moduleData,
-      this.context.intl.locale,
+      locale,
       themeConfig.categoryOrder,
       themeConfig.typeOrder,
     );
@@ -221,6 +223,7 @@ export default class MainContent extends React.Component {
   render() {
     const { props } = this;
     const { isMobile } = this.context;
+    const { openKeys } = this.state;
     const activeMenuItem = getActiveMenuItem(props);
     const menuItems = this.getMenuItems();
     const { prev, next } = this.getFooterNav(menuItems, activeMenuItem);
@@ -233,7 +236,7 @@ export default class MainContent extends React.Component {
         inlineIndent="40"
         className="aside-container menu-site"
         mode="inline"
-        openKeys={this.state.openKeys}
+        openKeys={openKeys}
         selectedKeys={[activeMenuItem]}
         onOpenChange={this.handleMenuOpenChange}
       >
@@ -253,13 +256,12 @@ export default class MainContent extends React.Component {
               <Col xxl={4} xl={5} lg={6} md={24} sm={24} xs={24} className="main-menu">
                 {menuChild}
               </Col>
-            )
-          }
+          )}
           <Col xxl={20} xl={19} lg={18} md={24} sm={24} xs={24} className={mainContainerClass}>
             {
-              props.demos ?
-                <ComponentDoc {...props} doc={localizedPageData} demos={props.demos} /> :
-                <Article {...props} content={localizedPageData} />
+              props.demos
+                ? <ComponentDoc {...props} doc={localizedPageData} demos={props.demos} />
+                : <Article {...props} content={localizedPageData} />
             }
           </Col>
         </Row>
@@ -275,14 +277,14 @@ export default class MainContent extends React.Component {
           >
             <section className="prev-next-nav">
               {
-                prev ?
-                  React.cloneElement(prev.props.children || prev.children[0], { className: 'prev-page' }) :
-                  null
+                prev
+                  ? React.cloneElement(prev.props.children || prev.children[0], { className: 'prev-page' })
+                  : null
               }
               {
-                next ?
-                  React.cloneElement(next.props.children || next.children[0], { className: 'next-page' }) :
-                  null
+                next
+                  ? React.cloneElement(next.props.children || next.children[0], { className: 'next-page' })
+                  : null
               }
             </section>
           </Col>
diff --git a/site/theme/template/Content/index.jsx b/site/theme/template/Content/index.jsx
index ed94563868..add5f6b02b 100644
--- a/site/theme/template/Content/index.jsx
+++ b/site/theme/template/Content/index.jsx
@@ -9,16 +9,16 @@ function isChangelog(pathname) {
 export default collect(async (nextProps) => {
   const { pathname } = nextProps.location;
   const pageDataPath = pathname.replace('-cn', '').split('/');
-  const pageData = isChangelog(pathname) ?
-    nextProps.data.changelog.CHANGELOG :
-    nextProps.utils.get(nextProps.data, pageDataPath);
+  const pageData = isChangelog(pathname)
+    ? nextProps.data.changelog.CHANGELOG
+    : nextProps.utils.get(nextProps.data, pageDataPath);
   if (!pageData) {
     throw 404; // eslint-disable-line no-throw-literal
   }
 
   const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
-  const pageDataPromise = typeof pageData === 'function' ?
-    pageData() : (pageData[locale] || pageData.index[locale] || pageData.index)();
+  const pageDataPromise = typeof pageData === 'function'
+    ? pageData() : (pageData[locale] || pageData.index[locale] || pageData.index)();
   const demosFetcher = nextProps.utils.get(nextProps.data, [...pageDataPath, 'demo']);
   if (demosFetcher) {
     const [localizedPageData, demos] = await Promise.all([pageDataPromise, demosFetcher()]);
diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx
index 2158ae4053..6afe636deb 100644
--- a/site/theme/template/Home/Banner.jsx
+++ b/site/theme/template/Home/Banner.jsx
@@ -19,15 +19,18 @@ class Banner extends React.PureComponent {
   static contextTypes = {
     intl: PropTypes.object.isRequired,
   }
+
   static propTypes = {
     className: PropTypes.string,
   }
+
   static defaultProps = {
     className: 'banner',
   }
+
   render() {
     const { className, isMobile } = this.props;
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
     const isZhCN = locale === 'zh-CN';
     return (
       <div className="home-page-wrapper banner-wrapper" id="banner">
diff --git a/site/theme/template/Home/BannerImage.jsx b/site/theme/template/Home/BannerImage.jsx
index 2693df812f..2192253855 100644
--- a/site/theme/template/Home/BannerImage.jsx
+++ b/site/theme/template/Home/BannerImage.jsx
@@ -59,7 +59,7 @@ function TweenOneG(props) {
 
 export default function BannerImage() {
   return (
-    <svg width="482px" height="500px" viewBox="0 0 482 500" >
+    <svg width="482px" height="500px" viewBox="0 0 482 500">
       <defs>
         <path d="M151,55 C129.666667,62.6666667 116,74.3333333 110,90 C104,105.666667 103,118.5 107,128.5 L225.5,96 C219.833333,79 209.666667,67 195,60 C180.333333,53 165.666667,51.3333333 151,55 L137,0 L306.5,6.5 L306.5,156 L227,187.5 L61.5,191 C4.5,175 -12.6666667,147.833333 10,109.5 C32.6666667,71.1666667 75,34.6666667 137,0 L151,55 Z" id="mask" />
       </defs>
@@ -122,7 +122,7 @@ export default function BannerImage() {
           </mask>
           <g mask="url(#mask-2)">
             <TweenOneG animation={animate.track} style={{ transformOrigin: '122.7px 58px' }}>
-              <g transform="translate(-16, -52)" >
+              <g transform="translate(-16, -52)">
                 <g transform="translate(16, 52)">
                   <path d="M83.1700911,35.9320015 C63.5256194,37.9279025 44.419492,43.1766434 25.8517088,51.6782243 C14.3939956,57.7126276 7.77167019,64.8449292 7.77167019,72.4866248 C7.77167019,94.1920145 61.1993389,111.787709 127.105708,111.787709 C193.012078,111.787709 246.439746,94.1920145 246.439746,72.4866248 C246.439746,55.2822262 212.872939,40.6598106 166.13127,35.3351955" id="line-s" stroke="#0D1A26" strokeWidth="1.35" strokeLinecap="round" transform="translate(127.105708, 73.561453) rotate(-16.000000) translate(-127.105708, -73.561453) " />
                 </g>
@@ -134,6 +134,6 @@ export default function BannerImage() {
           </g>
         </g>
       </g>
-    </svg >
+    </svg>
   );
 }
diff --git a/site/theme/template/Home/Page1.jsx b/site/theme/template/Home/Page1.jsx
index 68d62438fc..e30340067c 100644
--- a/site/theme/template/Home/Page1.jsx
+++ b/site/theme/template/Home/Page1.jsx
@@ -124,16 +124,19 @@ export default class Page1 extends React.PureComponent {
   state = {
     hoverKey: null,
   }
+
   onMouseOver = (key) => {
     this.setState({
       hoverKey: key,
     });
   }
+
   onMouseOut = () => {
     this.setState({
       hoverKey: null,
     });
   }
+
   getEnter = (i, e) => {
     const ii = e.index;
     const r = (Math.random() * 2) - 1;
@@ -153,6 +156,7 @@ export default class Page1 extends React.PureComponent {
       },
     ];
   };
+
   getSvgChild = child => child.map((item, i) => {
     const props = { ...item.props };
     if (item.type === 'g') {
@@ -165,18 +169,22 @@ export default class Page1 extends React.PureComponent {
       });
     }
     return (
-      <g key={i.toString()} >
+      <g key={i.toString()}>
         {React.cloneElement(item, props)}
       </g>
     );
   });
+
   leave = {
     opacity: 0, duration: 300, x: 100, y: 150, ease: 'easeInBack',
   };
+
   render() {
-    const isZhCN = this.props.locale === 'zh-CN';
+    const { locale, isMobile } = this.props;
+    const { hoverKey } = this.state;
+    const isZhCN = locale === 'zh-CN';
     const children = page1Data.map((item, i) => {
-      const isHover = item.nameEn === this.state.hoverKey;
+      const isHover = item.nameEn === hoverKey;
       return (
         <Col key={item.nameEn} md={6} xs={24}>
           <TweenOneGroup
@@ -187,7 +195,7 @@ export default class Page1 extends React.PureComponent {
             component="svg"
             resetStyleBool={false}
           >
-            {(this.props.isMobile || isHover) && this.getSvgChild(item.svgBg.props.children)}
+            {(isMobile || isHover) && this.getSvgChild(item.svgBg.props.children)}
           </TweenOneGroup>
           <QueueAnim
             className="page1-block"
@@ -200,14 +208,14 @@ export default class Page1 extends React.PureComponent {
             <div className="page1-image">
               <img src={item.img} alt="icon" />
             </div>
-            <h3 >{isZhCN ? item.name : item.nameEn}</h3>
+            <h3>{isZhCN ? item.name : item.nameEn}</h3>
           </QueueAnim>
         </Col>
       );
     });
     return (
       <div className="home-page-wrapper page1">
-        <div className="page" >
+        <div className="page">
           <h2><FormattedMessage id="app.home.design-language" /></h2>
           <ScrollOverPack playScale="0.3">
             <QueueAnim
diff --git a/site/theme/template/Home/Page2.jsx b/site/theme/template/Home/Page2.jsx
index ad5c1e07ac..02003624a1 100644
--- a/site/theme/template/Home/Page2.jsx
+++ b/site/theme/template/Home/Page2.jsx
@@ -35,7 +35,7 @@ const page2Data = [
 
 const svgBgChild = [
   (
-    <svg width="100%" height="100%" viewBox="0 0 1401 1109" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" preserveAspectRatio="xMidYMid slice" >
+    <svg width="100%" height="100%" viewBox="0 0 1401 1109" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" preserveAspectRatio="xMidYMid slice">
       <g transform="translate(-79.000000, -21.000000)">
         <circle id="Oval-13" stroke="none" fill="#EBEDF0" fillRule="evenodd" cx="98.5" cy="98.5" r="98.5" />
         <rect id="Rectangle-33" stroke="none" fill="#EBEDF0" fillRule="evenodd" transform="translate(1261.132034, 1217.132034) rotate(45.000000) translate(-1261.132034, -1217.132034) " x="1111.13203" y="1007.13203" width="300" height="300" rx="1" />
@@ -66,8 +66,8 @@ const svgBgChild = [
 ];
 
 const svgBgChildArray = svgBgChild.map((item, i) => {
-  const { props } = item;
-  return React.cloneElement(item, { children: svgBgToParallax(props.children, i) });
+  const { props: { children } } = item;
+  return React.cloneElement(item, { children: svgBgToParallax(children, i) });
 });
 export default function Page2({ isMobile, locale }) {
   const isZhCN = locale === 'zh-CN';
@@ -109,7 +109,7 @@ export default function Page2({ isMobile, locale }) {
   });
   return (
     <div className="home-page-wrapper page2" id="page2">
-      <div className="page" >
+      <div className="page">
         <h2><FormattedMessage id="app.home.solution" /></h2>
         <ScrollOverPack component={Row} className="page2-content" playScale="0.4">
           <QueueAnim
@@ -136,10 +136,10 @@ export default function Page2({ isMobile, locale }) {
           </QueueAnim>
         </ScrollOverPack>
       </div>
-      <div className="parallax-bg bottom" >
+      <div className="parallax-bg bottom">
         {svgBgChildArray[0]}
       </div>
-      <div className="parallax-bg top" >
+      <div className="parallax-bg top">
         {svgBgChildArray[1]}
       </div>
     </div>
diff --git a/site/theme/template/Home/Page3.jsx b/site/theme/template/Home/Page3.jsx
index d065165fc9..5b0955374e 100644
--- a/site/theme/template/Home/Page3.jsx
+++ b/site/theme/template/Home/Page3.jsx
@@ -63,19 +63,19 @@ export default function Page3({ locale }) {
               <a href={item.link} target="_black">
                 {child}
               </a>
-            )
+          )
         }
       </Col>
     );
   });
   return (
     <div className="home-page-wrapper page3" id="page3">
-      <div className="parallax-bg top" >
-        <svg width="1440px" height="557px" viewBox="0 0 1440 557" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" >
+      <div className="parallax-bg top">
+        <svg width="1440px" height="557px" viewBox="0 0 1440 557" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
           {svgChildren}
         </svg>
       </div>
-      <div className="page" >
+      <div className="page">
         <h2><FormattedMessage id="app.home.tool-title" /></h2>
         <ScrollOverPack location="page3">
           <QueueAnim key="queue" component={Row} type="bottom" leaveReverse>
diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx
index 7d759325c4..260deb8970 100644
--- a/site/theme/template/Home/index.jsx
+++ b/site/theme/template/Home/index.jsx
@@ -61,11 +61,12 @@ class Home extends React.Component {
     intl: PropTypes.object.isRequired,
     isMobile: PropTypes.bool.isRequired,
   }
+
   render() {
     const { isMobile, intl } = this.context;
     const childProps = { ...this.props, isMobile, locale: intl.locale };
     return (
-      <DocumentTitle title={`Ant Design - ${this.props.intl.formatMessage({ id: 'app.home.slogan' })}`}>
+      <DocumentTitle title={`Ant Design - ${intl.formatMessage({ id: 'app.home.slogan' })}`}>
         <div className="main-wrapper">
           <Banner {...childProps} />
           <Page1 {...childProps} />
diff --git a/site/theme/template/IconSet/CopyableIcon.jsx b/site/theme/template/IconSet/CopyableIcon.jsx
index 8f52a79860..f1183e5c96 100644
--- a/site/theme/template/IconSet/CopyableIcon.jsx
+++ b/site/theme/template/IconSet/CopyableIcon.jsx
@@ -6,6 +6,7 @@ export default class CopyableIcon extends React.Component {
   state = {
     justCopied: false,
   };
+
   onCopied = () => {
     this.setState({ justCopied: true }, () => {
       setTimeout(() => {
@@ -13,12 +14,14 @@ export default class CopyableIcon extends React.Component {
       }, 2000);
     });
   }
+
   render() {
     const { type, isNew } = this.props;
+    const { justCopied } = this.state;
     const text = `<Icon type="${type}" />`;
     return (
       <CopyToClipboard text={text} onCopy={this.onCopied}>
-        <li className={this.state.justCopied ? 'copied' : ''}>
+        <li className={justCopied ? 'copied' : ''}>
           <Icon type={type} />
           <span className="anticon-class">
             <Badge dot={isNew}>
diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx
index 1121481a75..45af2c2bbb 100644
--- a/site/theme/template/Layout/Footer.jsx
+++ b/site/theme/template/Layout/Footer.jsx
@@ -25,8 +25,8 @@ class Footer extends React.Component {
     //   1. 点击『知道了』之后不再提示
     //   2. 超过截止日期后不再提示
     if (
-      localStorage.getItem('antd@3.0.0-notification-sent') !== 'true' &&
-        Date.now() < new Date('2017/12/20').getTime()
+      localStorage.getItem('antd@3.0.0-notification-sent') !== 'true'
+        && Date.now() < new Date('2017/12/20').getTime()
     ) {
       this.infoNewVersion();
     }
@@ -34,7 +34,7 @@ class Footer extends React.Component {
 
   handleColorChange = (color) => {
     const changeColor = () => {
-      const { messages } = this.props.intl;
+      const { intl: { messages } } = this.props;
       window.less.modifyVars({
         '@primary-color': color,
       }).then(() => {
@@ -59,7 +59,7 @@ class Footer extends React.Component {
   }
 
   infoNewVersion() {
-    const { messages } = this.props.intl;
+    const { intl: { messages } } = this.props;
     Modal.info({
       title: messages['app.publish.title'],
       content: (
@@ -83,6 +83,7 @@ class Footer extends React.Component {
   }
 
   render() {
+    const { color } = this.state;
     return (
       <footer id="footer">
         <div className="footer-wrap">
@@ -262,7 +263,7 @@ class Footer extends React.Component {
                   <ColorPicker
                     type="sketch"
                     small
-                    color={this.state.color}
+                    color={color}
                     position="top"
                     presetColors={[
                       '#F5222D',
diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx
index c40a855301..1ea551a848 100644
--- a/site/theme/template/Layout/Header.jsx
+++ b/site/theme/template/Layout/Header.jsx
@@ -84,7 +84,7 @@ export default class Header extends React.Component {
   }
 
   handleLangChange = () => {
-    const { pathname } = this.props.location;
+    const { location: { pathname } } = this.props;
     const currentProtocol = `${window.location.protocol}//`;
     const currentHref = window.location.href.substr(currentProtocol.length);
 
@@ -113,7 +113,7 @@ export default class Header extends React.Component {
     if (activeMenuItem === 'components' || location.pathname === 'changelog') {
       activeMenuItem = 'docs/react';
     }
-    const { locale } = this.context.intl;
+    const { intl: { locale } } = this.context;
     const isZhCN = locale === 'zh-CN';
 
     const headerClassName = classNames({
diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx
index 6a089a2ebc..b34d91d40b 100644
--- a/site/theme/template/Layout/index.jsx
+++ b/site/theme/template/Layout/index.jsx
@@ -37,14 +37,14 @@ export default class Layout extends React.Component {
   static contextTypes = {
     router: PropTypes.object.isRequired,
   }
+
   static childContextTypes = {
     isMobile: PropTypes.bool,
   };
 
   getChildContext() {
-    return {
-      isMobile: this.state.isMobile,
-    };
+    const { isMobile: mobile } = this.state;
+    return { isMobile: mobile };
   }
 
   constructor(props) {
@@ -60,7 +60,8 @@ export default class Layout extends React.Component {
   }
 
   componentDidMount() {
-    this.context.router.listen((loc) => {
+    const { router } = this.context;
+    router.listen((loc) => {
       if (typeof window.ga !== 'undefined') {
         window.ga('send', 'pageview', loc.pathname + loc.search);
       }
diff --git a/site/theme/template/utils.jsx b/site/theme/template/utils.jsx
index f063f7c741..aace19d4c5 100644
--- a/site/theme/template/utils.jsx
+++ b/site/theme/template/utils.jsx
@@ -1,4 +1,3 @@
-
 export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
   const menuMeta = moduleData.map(item => item.meta);
   const menuItems = [];
@@ -51,9 +50,11 @@ export function getLocalizedPathname(path, zhCN) {
   const pathname = path.startsWith('/') ? path : `/${path}`;
   if (!zhCN) { // to enUS
     return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
-  } else if (pathname === '/') {
+  }
+  if (pathname === '/') {
     return '/index-cn';
-  } else if (pathname.endsWith('/')) {
+  }
+  if (pathname.endsWith('/')) {
     return pathname.replace(/\/$/, '-cn/');
   }
   return `${pathname}-cn`;
@@ -99,4 +100,3 @@ export function loadScript(src) {
     document.head.appendChild(script);
   });
 }
-
diff --git a/tests/__mocks__/rc-trigger.js b/tests/__mocks__/rc-trigger.js
index e74c24a051..9991c3f8d4 100644
--- a/tests/__mocks__/rc-trigger.js
+++ b/tests/__mocks__/rc-trigger.js
@@ -7,11 +7,11 @@ if (process.env.REACT === '15') {
   const render = ActualTrigger.prototype.render;
 
   ActualTrigger.prototype.render = function () {
-    const { popupVisible } = this.state;
+    const { popupVisible } = this.state; // eslint-disable-line
     let component;
 
     if (popupVisible || this._component) { // eslint-disable-line
-      component = this.getComponent();
+      component = this.getComponent(); // eslint-disable-line
     }
 
     return (
diff --git a/tests/__mocks__/rc-util/lib/Portal.js b/tests/__mocks__/rc-util/lib/Portal.js
index 586b6f907e..c9d696b485 100644
--- a/tests/__mocks__/rc-util/lib/Portal.js
+++ b/tests/__mocks__/rc-util/lib/Portal.js
@@ -11,8 +11,9 @@ export default class Portal extends React.Component {
   }
 
   render() {
+    const { children } = this.props;
     if (this.container) {
-      return this.props.children;
+      return children;
     }
     return null;
   }
diff --git a/tests/dekko/dist.test.js b/tests/dekko/dist.test.js
index 3f6570ed5d..cffcc298ec 100644
--- a/tests/dekko/dist.test.js
+++ b/tests/dekko/dist.test.js
@@ -9,4 +9,3 @@ $('dist')
 
 // eslint-disable-next-line
 console.log('`dist` directory is valid.');
-
diff --git a/tests/dekko/lib.test.js b/tests/dekko/lib.test.js
index a814b5b25c..86e95efd26 100644
--- a/tests/dekko/lib.test.js
+++ b/tests/dekko/lib.test.js
@@ -7,13 +7,11 @@ $('lib')
 
 $('lib/*')
   .filter((filename) => {
-    return !filename.endsWith('index.js') &&
-      !filename.endsWith('index.d.ts');
+    return !filename.endsWith('index.js') && !filename.endsWith('index.d.ts');
   })
   .isDirectory()
   .filter((filename) => {
-    return !filename.endsWith('style') &&
-      !filename.endsWith('_util');
+    return !filename.endsWith('style') && !filename.endsWith('_util');
   })
   .hasFile('index.js')
   .hasFile('index.d.ts')
@@ -28,4 +26,3 @@ $('lib/style')
 
 // eslint-disable-next-line
 console.log('`lib` directory is valid.');
-