componentWillReceiveProps => getDerivedStateFromProps

site/theme/template/Color/ColorPicker.jsx

@@ -15,16 +15,14 @@ export default class ColorPicker extends Component {
     position: 'bottom',
   }
 
-  constructor(props) {
-    super();
-    this.state = {
-      displayColorPicker: false,
+  static getDerivedStateFromProps(props) {
+    return {
       color: props.color,
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({ color: nextProps.color });
+  state = {
+    displayColorPicker: false,
   }
 
   handleClick = () => {

site/theme/template/Content/Demo.jsx

@@ -26,19 +26,11 @@ export default class Demo extends React.Component {
 
   state = {
     codeExpand: false,
-    sourceCode: '',
     copied: false,
     copyTooltipVisible: false,
     showRiddleButton: false,
   };
 
-  componentWillReceiveProps(nextProps) {
-    const { highlightedCode } = nextProps;
-    const div = document.createElement('div');
-    div.innerHTML = highlightedCode[1].highlighted;
-    this.setState({ sourceCode: div.textContent });
-  }
-
   shouldComponentUpdate(nextProps, nextState) {
     const { codeExpand, copied, copyTooltipVisible } = this.state;
     const { expand } = this.props;
@@ -52,7 +44,6 @@ export default class Demo extends React.Component {
     if (meta.id === location.hash.slice(1)) {
       this.anchor.click();
     }
-    this.componentWillReceiveProps(this.props);
 
     this.pingTimer = ping((status) => {
       if (status !== 'timeout' && status !== 'error') {
@@ -63,6 +54,13 @@ export default class Demo extends React.Component {
     });
   }
 
+  getSourceCode() {
+    const { highlightedCode } = this.props;
+    const div = document.createElement('div');
+    div.innerHTML = highlightedCode[1].highlighted;
+    return div.textContent;
+  }
+
   handleCodeExpand = () => {
     const { codeExpand } = this.state;
     this.setState({ codeExpand: !codeExpand });
@@ -130,10 +128,12 @@ export default class Demo extends React.Component {
   var mountNode = document.getElementById('container');
 </script>`;
 
+    const sourceCode = this.getSourceCode();
+
     const codepenPrefillConfig = {
       title: `${localizedTitle} - Ant Design Demo`,
       html,
-      js: state.sourceCode
+      js: sourceCode
         .replace(/import\s+\{\s+(.*)\s+\}\s+from\s+'antd';/, 'const { $1 } = antd;')
         .replace("import moment from 'moment';", ''),
       css: prefillStyle,
@@ -149,10 +149,10 @@ export default class Demo extends React.Component {
     };
     const riddlePrefillConfig = {
       title: `${localizedTitle} - Ant Design Demo`,
-      js: state.sourceCode,
+      js: sourceCode,
       css: prefillStyle,
     };
-    const dependencies = state.sourceCode.split('\n').reduce((acc, line) => {
+    const dependencies = sourceCode.split('\n').reduce((acc, line) => {
       const matches = line.match(/import .+? from '(.+)';$/);
       if (matches && matches[1]) {
         acc[matches[1]] = 'latest';
@@ -175,7 +175,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'antd/dist/antd.css';
 import './index.css';
-${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')')}
+${sourceCode.replace('mountNode', 'document.getElementById(\'container\')')}
           `,
         },
         'index.html': {
@@ -247,7 +247,7 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
                 </Tooltip>
               </form>
               <CopyToClipboard
-                text={state.sourceCode}
+                text={sourceCode}
                 onCopy={this.handleCodeCopied}
               >
                 <Tooltip

site/theme/template/Content/MainContent.jsx

@@ -33,28 +33,39 @@ function fileNameToPath(filename) {
   return snippets[snippets.length - 1];
 }
 
-export default class MainContent extends React.Component {
+const getSideBarOpenKeys = (nextProps) => {
+  const { themeConfig } = nextProps;
+  const { pathname } = nextProps.location;
+  const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
+  const moduleData = getModuleData(nextProps);
+  const shouldOpenKeys = utils.getMenuItems(
+    moduleData,
+    locale,
+    themeConfig.categoryOrder,
+    themeConfig.typeOrder
+  ).map(m => m.title[locale] || m.title);
+  return shouldOpenKeys;
+};
+
+export default class MainContent extends React.PureComponent {
   static contextTypes = {
     intl: PropTypes.object.isRequired,
     isMobile: PropTypes.bool.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      openKeys: this.getSideBarOpenKeys(props) || [],
-    };
+  state = {
+    openKeys: undefined,
   }
 
   componentDidMount() {
     this.componentDidUpdate();
   }
 
-  componentWillReceiveProps(nextProps) {
-    const openKeys = this.getSideBarOpenKeys(nextProps);
-    if (openKeys) {
-      this.setState({ openKeys });
-    }
+  static getDerivedStateFromProps(props, state) {
+    return {
+      ...state,
+      openKeys: getSideBarOpenKeys(props),
+    };
   }
 
   componentDidUpdate(prevProps) {
@@ -99,27 +110,6 @@ export default class MainContent extends React.Component {
     this.setState({ openKeys });
   }
 
-  getSideBarOpenKeys(nextProps) {
-    const { themeConfig } = nextProps;
-    const { pathname } = nextProps.location;
-    const prevModule = this.currentModule;
-    this.currentModule = pathname.replace(/^\//).split('/')[1] || 'components';
-    if (this.currentModule === 'react') {
-      this.currentModule = 'components';
-    }
-    const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
-    if (prevModule !== this.currentModule) {
-      const moduleData = getModuleData(nextProps);
-      const shouldOpenKeys = utils.getMenuItems(
-        moduleData,
-        locale,
-        themeConfig.categoryOrder,
-        themeConfig.typeOrder
-      ).map(m => m.title[locale] || m.title);
-      return shouldOpenKeys;
-    }
-  }
-
   generateMenuItem(isTop, item, { before = null, after = null }) {
     const { intl: { locale } } = this.context;
     const key = fileNameToPath(item.filename);