readme更新

README.md

@@ -162,10 +162,12 @@ ReactDOM.render(
 
 
 再看看```dragact```优化前是怎样的
+
 ![非常长的一条块，已经拖动超出了屏幕很多才会交换方块](https://github.com/215566435/Dragact/blob/master/example/image/%E6%89%8B%E6%84%9F%E4%BC%98%E5%8C%96%E5%89%8D.gif)
 
 
 再看看优化以后的```dragact```是怎样的体验
+
 ![当长方条的中心，超过下面方块的中心的时候，就会发生移动](https://github.com/215566435/Dragact/blob/master/example/image/%E6%89%8B%E6%84%9F%E4%BC%98%E5%8C%96%E5%90%8E%20.gif)
 
 
@@ -173,6 +175,20 @@ ReactDOM.render(
 
 通过这种趋势的判断和大量实验，```dragact```选择了重力中心为移动点，更自然，手感更顺滑.
 
+### 5.性能优异
+
+让我们用直观的动图来观看性能吧！
+
+![](https://github.com/215566435/Dragact/blob/master/example/image/v.17%E4%BC%98%E5%8C%96%E5%89%8D.gif)
+
+这是一条超过300行的大量数据，在优化前，我们可以看到，会有明显的卡顿。
+
+![](https://github.com/215566435/Dragact/blob/master/example/image/v.17%E4%BC%98%E5%8C%96%E5%90%8E.gif)
+
+用过react组件的优化后，依旧是一条超过300行的大量数据。
+
+可以看到组件插入速度的明显的变化。
+
 
 
 

src/index.tsx

@@ -36,10 +36,10 @@ class DemoDispatcher extends React.Component<{}, {}> {
     render() {
         return (
             <div>
-                <iframe src="https://ghbtns.com/github-btn.html?user=215566435&repo=Dragact&type=star&count=true&size=large" 
-                frameBorder='0' scrolling="0" width="160px" height="30px"></iframe>
-                <iframe src="https://ghbtns.com/github-btn.html?user=215566435&repo=Dragact&type=fork&count=true&size=large" 
-                frameBorder="0" scrolling="0" width="158px" height="30px"></iframe>
+                <iframe src="https://ghbtns.com/github-btn.html?user=215566435&repo=Dragact&type=star&count=true&size=large"
+                    frameBorder='0' scrolling="0" width="160px" height="30px"></iframe>
+                <iframe src="https://ghbtns.com/github-btn.html?user=215566435&repo=Dragact&type=fork&count=true&size=large"
+                    frameBorder="0" scrolling="0" width="158px" height="30px"></iframe>
                 <div>切换 Demos</div>
                 <div className='demo-button-layout'>
                     <button onClick={() => this.handleLayoutChange('normalLayout')}>普通布局</button>
@@ -54,9 +54,9 @@ class DemoDispatcher extends React.Component<{}, {}> {
     }
 }
 
-{/* <DemoDispatcher />
+<DemoDispatcher />
 
-<Dragact/> */}
+//<Dragact/> */}
 
 // const fakeData = [
 //     { GridX: 0, GridY: 0, w: 4, h: 2, key: '0' },
@@ -70,6 +70,21 @@ class DemoDispatcher extends React.Component<{}, {}> {
 //     }
 // };
 
+// const Handle = ({ provided }: any) => {
+//     return (
+//         <div
+//             {...provided.dragHandle}
+//             style={{
+//                 ...getblockStyle(provided.isDragging),
+//                 borderBottom: '1px solid rgba(120,120,120,0.3)',
+//                 textAlign: 'center'
+//             }}
+//         >
+//             点击拖拽
+//         </div>
+//     )
+// }
+
 // ReactDOM.render(
 //     <Dragact
 //         layout={fakeData}//必填项
@@ -85,12 +100,9 @@ class DemoDispatcher extends React.Component<{}, {}> {
 //             return (
 //                 <div
 //                     {...provided.props}
-//                     {...provided.dragHandle}
-//                     style={{
-//                         ...provided.props.style,
-//                         ...getblockStyle(provided.isDragging)
-//                     }}
+//                     style={{ ...provided.props.style, background: 'white' }}
 //                 >
+//                     <Handle provided={provided} />
 //                     {provided.isDragging ? '正在抓取' : '停放'}
 //                 </div>
 //             )

src/showdown/index.ts

@@ -0,0 +1,32 @@
+const showdown = require('showdown');
+const hljs = require('highlightjs');
+
+var decodeHtml = require("html-encoder-decoder").decode;
+
+function showdownHighlight() {
+    return [{
+        type: "output",
+        filter: function filter(text: any, converter: any, options: any) {
+            var left = "<pre><code\\b[^>]*>",
+                right = "</code></pre>",
+                flags = "g",
+                replacement = function replacement(wholeMatch: any, match: any, left: any, right: any) {
+                    match = decodeHtml(match);
+                    var lang = (left.match(/class=\"([^ \"]+)/) || [])[1];
+                    console.log(left + hljs.highlight(lang, match).value + right);
+                    if (lang) {
+                        return left + hljs.highlight(lang, match).value + right;
+                    } else {
+                        return left + hljs.highlightAuto(match).value + right;
+                    }
+                };
+
+            return showdown.helper.replaceRecursiveRegExp(text, replacement, left, right, flags);
+        }
+    }];
+};
+
+
+export const convertor = new showdown.Converter({
+    extensions: [showdownHighlight]
+});