diff --git a/components/tree/demo/basic-controlled.md b/components/tree/demo/basic-controlled.md
index 16c3851ff0..9c5b9d471b 100644
--- a/components/tree/demo/basic-controlled.md
+++ b/components/tree/demo/basic-controlled.md
@@ -45,16 +45,14 @@ const generateData = (_level, _preKey, _tns) => {
 };
 generateData(z);
 
-const Demo = React.createClass({
-  getInitialState() {
-    return {
-      expandedKeys: ['0-0-0', '0-0-1'],
-      autoExpandParent: true,
-      checkedKeys: ['0-0-0'],
-      selectedKeys: [],
-    };
-  },
-  onExpand(expandedKeys) {
+class Demo extends React.Component {
+  state = {
+    expandedKeys: ['0-0-0', '0-0-1'],
+    autoExpandParent: true,
+    checkedKeys: ['0-0-0'],
+    selectedKeys: [],
+  }
+  onExpand = (expandedKeys) => {
     console.log('onExpand', arguments);
     // if not set autoExpandParent to false, if children expanded, parent can not collapse.
     // or, you can remove all expanded children keys.
@@ -62,17 +60,17 @@ const Demo = React.createClass({
       expandedKeys,
       autoExpandParent: false,
     });
-  },
-  onCheck(checkedKeys) {
+  }
+  onCheck = (checkedKeys) => {
     this.setState({
       checkedKeys,
       selectedKeys: ['0-3', '0-4'],
     });
-  },
-  onSelect(selectedKeys, info) {
+  }
+  onSelect = (selectedKeys, info) => {
     console.log('onSelect', info);
     this.setState({ selectedKeys });
-  },
+  }
   render() {
     const loop = data => data.map((item) => {
       if (item.children) {
@@ -95,8 +93,8 @@ const Demo = React.createClass({
         {loop(gData)}
       </Tree>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<Demo />, mountNode);
 ````
diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md
index aef36c976b..a257f461c1 100644
--- a/components/tree/demo/basic.md
+++ b/components/tree/demo/basic.md
@@ -17,26 +17,21 @@ The most basic usage, tell you how to use checkable, selectable, disabled, defau
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
 
-const Demo = React.createClass({
-  getDefaultProps() {
-    return {
-      keys: ['0-0-0', '0-0-1'],
-    };
-  },
-  getInitialState() {
-    const keys = this.props.keys;
-    return {
-      defaultExpandedKeys: keys,
-      defaultSelectedKeys: keys,
-      defaultCheckedKeys: keys,
-    };
-  },
-  onSelect(info) {
+class Demo extends React.Component {
+  static defaultProps = {
+    keys: ['0-0-0', '0-0-1'],
+  }
+  state = {
+    defaultExpandedKeys: this.props.keys,
+    defaultSelectedKeys: this.props.keys,
+    defaultCheckedKeys: this.props.keys,
+  }
+  onSelect = (info) => {
     console.log('selected', info);
-  },
-  onCheck(info) {
+  }
+  onCheck = (info) => {
     console.log('onCheck', info);
-  },
+  }
   render() {
     return (
       <Tree className="myCls" showLine checkable
@@ -56,8 +51,8 @@ const Demo = React.createClass({
         </TreeNode>
       </Tree>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<Demo />, mountNode);
 ````
diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md
index 8a1649f1db..0651623467 100644
--- a/components/tree/demo/draggable.md
+++ b/components/tree/demo/draggable.md
@@ -1,6 +1,6 @@
 ---
 order: 2
-title: 
+title:
   zh-CN: 拖动示例
   en-US: draggable
 ---
@@ -45,21 +45,19 @@ const generateData = (_level, _preKey, _tns) => {
 };
 generateData(z);
 
-const Demo = React.createClass({
-  getInitialState() {
-    return {
-      gData,
-      expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
-    };
-  },
-  onDragEnter(info) {
+class Demo extends React.Component {
+  state = {
+    gData,
+    expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
+  }
+  onDragEnter = (info) => {
     console.log(info);
     // expandedKeys 需要受控时设置
     // this.setState({
     //   expandedKeys: info.expandedKeys,
     // });
-  },
-  onDrop(info) {
+  }
+  onDrop = (info) => {
     console.log(info);
     const dropKey = info.node.props.eventKey;
     const dragKey = info.dragNode.props.eventKey;
@@ -98,7 +96,7 @@ const Demo = React.createClass({
     this.setState({
       gData: data,
     });
-  },
+  }
   render() {
     const loop = data => data.map((item) => {
       if (item.children && item.children.length) {
@@ -116,8 +114,8 @@ const Demo = React.createClass({
         {loop(this.state.gData)}
       </Tree>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<Demo />, mountNode);
 ````
diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md
index 6ac0623505..425e8c90f3 100644
--- a/components/tree/demo/dynamic.md
+++ b/components/tree/demo/dynamic.md
@@ -1,6 +1,6 @@
 ---
 order: 3
-title: 
+title:
   zh-CN: 异步数据加载
   en-US: load data asynchronously
 ---
@@ -61,12 +61,10 @@ function getNewTreeData(treeData, curKey, child, level) {
   setLeaf(treeData, curKey, level);
 }
 
-const Demo = React.createClass({
-  getInitialState() {
-    return {
-      treeData: [],
-    };
-  },
+class Demo extends React.Component {
+  state = {
+    treeData: [],
+  }
   componentDidMount() {
     setTimeout(() => {
       this.setState({
@@ -77,11 +75,11 @@ const Demo = React.createClass({
         ],
       });
     }, 100);
-  },
-  onSelect(info) {
+  }
+  onSelect = (info) => {
     console.log('selected', info);
-  },
-  onLoadData(treeNode) {
+  }
+  onLoadData = (treeNode) => {
     return new Promise((resolve) => {
       setTimeout(() => {
         const treeData = [...this.state.treeData];
@@ -90,7 +88,7 @@ const Demo = React.createClass({
         resolve();
       }, 1000);
     });
-  },
+  }
   render() {
     const loop = data => data.map((item) => {
       if (item.children) {
@@ -104,8 +102,8 @@ const Demo = React.createClass({
         {treeNodes}
       </Tree>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<Demo />, mountNode);
 ````