diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md
index f573ec511b..5a06dde783 100644
--- a/components/locale-provider/demo/all.md
+++ b/components/locale-provider/demo/all.md
@@ -37,11 +37,8 @@ const columns = [{
 }];
 
 class Page extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      visible: false,
-    };
+  state = {
+    visible: false,
   }
   showModal = () => {
     this.setState({ visible: true });
diff --git a/components/locale-provider/demo/basic.md b/components/locale-provider/demo/basic.md
index 9367669c64..fddd036076 100644
--- a/components/locale-provider/demo/basic.md
+++ b/components/locale-provider/demo/basic.md
@@ -17,13 +17,11 @@ Wrap your app with `LocaleProvider`, and apply the corresponding language packag
 import { Pagination, LocaleProvider } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
 
-function App() {
-  return (
-    <div>
-      <Pagination defaultCurrent={1} total={50} showSizeChanger />
-    </div>
-  );
-}
+const App = () = >(
+  <div>
+    <Pagination defaultCurrent={1} total={50} showSizeChanger />
+  </div>
+};
 
 ReactDOM.render(
   <LocaleProvider locale={enUS}>
diff --git a/components/mention/demo/async.md b/components/mention/demo/async.md
index 69e9a6d0bd..25b79df29a 100644
--- a/components/mention/demo/async.md
+++ b/components/mention/demo/async.md
@@ -19,12 +19,9 @@ import { Mention } from 'antd';
 const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
 
 class AsyncMention extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      suggestions: [],
-      loading: false,
-    };
+  state = {
+    suggestions: [],
+    loading: false,
   }
   fetchSuggestions(value, callback) {
     setTimeout(() => {
diff --git a/components/mention/demo/avatar.md b/components/mention/demo/avatar.md
index 82ae6757b6..7838c4d738 100644
--- a/components/mention/demo/avatar.md
+++ b/components/mention/demo/avatar.md
@@ -27,11 +27,8 @@ const webFrameworks = [
 ];
 
 class CustomNavMention extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      suggestions: [],
-    };
+  state = {
+    suggestions: [],
   }
   onSearchChange = (value) => {
     const searchValue = value.toLowerCase();
diff --git a/components/mention/demo/controllder-simple.md b/components/mention/demo/controllder-simple.md
index 8238a3a20b..0c314711ca 100644
--- a/components/mention/demo/controllder-simple.md
+++ b/components/mention/demo/controllder-simple.md
@@ -18,11 +18,8 @@ import { Mention } from 'antd';
 const { toEditorState } = Mention;
 
 class App extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      value: toEditorState('@afc163'),
-    };
+  state = {
+    value: toEditorState('@afc163'),
   }
   handleChange = (editorState) => {
     this.setState({
diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md
index d91bbdf5ed..df4f09aa70 100644
--- a/components/mention/demo/controlled.md
+++ b/components/mention/demo/controlled.md
@@ -19,11 +19,8 @@ const { toEditorState, getMentions } = Mention;
 const FormItem = Form.Item;
 
 class App extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      initValue: toEditorState('@afc163'),
-    };
+  state = {
+    initValue: toEditorState('@afc163'),
   }
   handleReset = (e) => {
     e.preventDefault();
diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md
index 85805c92bf..e00423ea8b 100644
--- a/components/mention/demo/custom-tag.md
+++ b/components/mention/demo/custom-tag.md
@@ -32,11 +32,8 @@ function onSelect(suggestion, data) {
 }
 
 class CustomNavMention extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      suggestions: [],
-    };
+  state = {
+    suggestions: [],
   }
   onSearchChange = (value) => {
     const searchValue = value.toLowerCase();