删除大量无用方法，优化性能，提升20%

src/StaticHeader/index.tsx

@@ -6,7 +6,7 @@ const Words = [
     { content: 'Sorry I just can not move in any circumstances', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg', static: true },
     { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
     { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
-    { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
+    { content: 'Sorry I just can not move in any circumstances,too', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738', static: true },
     { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
 ]
 

src/index.tsx

@@ -19,7 +19,7 @@ const DemoMap: any = {
 class DemoDispatcher extends React.Component<{}, {}> {
 
     state = {
-        demo: <HandleLayout />
+        demo: <LayoutDemo />
     }
 
     handleLayoutChange = (demoName: string) => {

src/lib/dragact.tsx

@@ -84,16 +84,22 @@ export interface DragactProps {
     className: number | string
 }
 
+export interface mapLayout {
+    [key: string]: DragactLayoutItem
+}
+
 interface DragactState {
     GridXMoving: number
     GridYMoving: number
     wMoving: number
     hMoving: number
-    placeholderShow: Boolean,
-    placeholderMoving: Boolean,
-    layout: DragactLayoutItem[],
-    containerHeight: number,
+    placeholderShow: Boolean
+    placeholderMoving: Boolean
+    layout: DragactLayoutItem[]
+    containerHeight: number
     dragType: 'drag' | 'resize'
+    mapLayout: mapLayout | undefined
+
 }
 
 export class Dragact extends React.Component<DragactProps, DragactState> {
@@ -118,12 +124,13 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
             placeholderMoving: false,
             layout: layout,
             containerHeight: 500,
-            dragType: 'drag'
+            dragType: 'drag',
+            mapLayout: undefined
         }
     }
     onResizeStart = (layoutItem: GridItemEvent) => {
-        const { GridX, GridY, w, h, UniqueKey } = layoutItem
-        const sync = syncLayout(this.state.layout, UniqueKey, GridX, GridY, true);
+        const { GridX, GridY, w, h } = layoutItem
+        const sync = syncLayout(this.state.layout, layoutItem);
         this.setState({
             GridXMoving: GridX,
             GridYMoving: GridY,
@@ -140,44 +147,32 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
 
         const newLayout = layoutCheck(this.state.layout, layoutItem, layoutItem.UniqueKey, layoutItem.UniqueKey, 0);
 
-        const compacted = compactLayout(newLayout)
-
-        for (let i = 0; i < compacted.length; i++) {
-            const compactedItem = compacted[i];
-            if (layoutItem.UniqueKey === compactedItem.key) {
-                /**
-                 * 特殊点：当我们移动元素的时候，元素在layout中的位置不断改变
-                 * 但是当isUserMove=true的时候，鼠标拖拽的元素不会随着位图变化而变化
-                 * 但是实际layout中的位置还是会改变
-                 * (isUserMove=true用于解除placeholder和元素的绑定)
-                 */
-                compactedItem.isUserMove = true
-                break
-            }
-        }
+        const { compacted, mapLayout } = compactLayout(newLayout, layoutItem)
 
         this.setState({
             layout: compacted,
             wMoving: layoutItem.w,
             hMoving: layoutItem.h,
+            mapLayout: mapLayout,
             containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
         })
     }
 
     onResizeEnd = (layoutItem: GridItemEvent) => {
-        const compactedLayout = compactLayout(this.state.layout)
+        const { compacted, mapLayout } = compactLayout(this.state.layout, undefined)
         this.setState({
             placeholderShow: false,
-            layout: compactedLayout,
-            containerHeight: getMaxContainerHeight(compactedLayout, this.props.rowHeight, this.props.margin[1])
+            layout: compacted,
+            mapLayout: mapLayout,
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
         })
         this.props.onDragEnd && this.props.onDragEnd(layoutItem);
     }
 
     onDragStart(bundles: GridItemEvent) {
-        const { GridX, GridY, w, h, UniqueKey } = bundles
+        const { GridX, GridY, w, h } = bundles
 
-        const newlayout = syncLayout(this.state.layout, UniqueKey, GridX, GridY, true)
+        const newlayout = syncLayout(this.state.layout, bundles)
 
         this.setState({
             GridXMoving: GridX,
@@ -198,39 +193,27 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
         const moving = GridY - this.state.GridYMoving
 
         const newLayout = layoutCheck(this.state.layout, layoutItem, UniqueKey, UniqueKey/*用户移动方块的key */, moving)
-        const compactedLayout = compactLayout(newLayout)
-        for (let i = 0; i < compactedLayout.length; i++) {
-            const compactedItem = compactedLayout[i];
-            if (UniqueKey === compactedItem.key) {
-                /**
-                 * 特殊点：当我们移动元素的时候，元素在layout中的位置不断改变
-                 * 但是当isUserMove=true的时候，鼠标拖拽的元素不会随着位图变化而变化
-                 * 但是实际layout中的位置还是会改变
-                 * (isUserMove=true用于解除placeholder和元素的绑定)
-                 */
-                compactedItem.isUserMove = true
-                layoutItem.GridX = compactedItem.GridX
-                layoutItem.GridY = compactedItem.GridY
-                break
-            }
-        }
+        const { compacted, mapLayout } = compactLayout(newLayout, layoutItem)
+
         this.setState({
             GridXMoving: layoutItem.GridX,
             GridYMoving: layoutItem.GridY,
-            layout: compactedLayout,
-            containerHeight: getMaxContainerHeight(compactedLayout, this.props.rowHeight, this.props.margin[1])
+            layout: compacted,
+            mapLayout: mapLayout,
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
         })
         this.props.onDrag && this.props.onDrag(layoutItem);
     }
 
     onDragEnd(layoutItem: GridItemEvent) {
 
-        const compactedLayout = compactLayout(this.state.layout)
+        const { compacted, mapLayout } = compactLayout(this.state.layout, undefined)
 
         this.setState({
             placeholderShow: false,
-            layout: compactedLayout,
-            containerHeight: getMaxContainerHeight(compactedLayout, this.props.rowHeight, this.props.margin[1])
+            layout: compacted,
+            mapLayout: mapLayout,
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
         })
 
         this.props.onDragEnd && this.props.onDragEnd(layoutItem);
@@ -262,13 +245,9 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     }
 
     componentWillReceiveProps(nextProps: any) {
-        if(nextProps.children.length !== this.props.children.length){
-            
-        }
-
         const layout = getDataSet(nextProps.children);
         let newlayout = correctLayout(layout, this.props.col)
-        const compacted = compactLayout(newlayout);
+        const { compacted } = compactLayout(newlayout, undefined);
         console.log(layout)
         this.setState({
             layout: compacted
@@ -279,19 +258,20 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     componentDidMount() {
         setTimeout(() => {
             let layout = correctLayout(this.state.layout, this.props.col)
-            const compacted = compactLayout(layout);
+            const { compacted, mapLayout } = compactLayout(layout, undefined);
             this.setState({
                 layout: compacted,
+                mapLayout: mapLayout,
                 containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
             })
         }, 1);
     }
 
     getGridItem(child: any, index: number) {
-        const { layout, dragType } = this.state
+        const { dragType, mapLayout } = this.state
         var { col, width, padding, rowHeight, margin } = this.props;
-        const renderItem = layoutItemForkey(layout, child.key);//TODO:可以优化速度，这一步不是必须;
-        if (renderItem) {
+        if (mapLayout) {
+            const renderItem = layoutItemForkey(mapLayout, child.key);
             if (!padding) padding = 0;
             return (
                 <GridItem
@@ -323,7 +303,6 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
             )
         }
     }
-
     render() {
         const { width, className } = this.props;
         const { containerHeight } = this.state;

src/lib/util/collison.ts

@@ -29,7 +29,6 @@ export const layoutCheck = (layout: DragactLayoutItem[], layoutItem: GridItemEve
 
     let i: any = [], movedItem: any = []/**收集所有移动过的物体 */
     let newlayout = layout.map((item, idx) => {
-
         if (item.key !== key) {
             if (item.static) {
                 return item
@@ -52,35 +51,6 @@ export const layoutCheck = (layout: DragactLayoutItem[], layoutItem: GridItemEve
                      */
                     offsetY = item.GridY
                 }
-                /**
-                 * 物体向下移动的时候
-                 */
-
-                if (moving > 0) {
-                    if (layoutItem.GridY + layoutItem.h < item.GridY) {
-                        let collision;
-                        let copy = { ...item }
-                        while (true) {
-                            let newLayout = layout.filter((item) => {
-                                if (item.key !== key && (item.key !== copy.key)) {
-                                    return item
-                                }
-                            })
-                            collision = getFirstCollison(newLayout, copy)
-                            if (collision) {
-                                offsetY = collision.GridY + collision.h
-                                break
-                            } else {
-                                copy.GridY--
-                            }
-                            if (copy.GridY < 0) {
-                                offsetY = 0
-                                break
-                            }
-                        }
-                    }
-                }
-
                 // const newItem = { ...item, GridX: layoutItem.GridX, GridY: offsetY, isUserMove: false };
 
                 const newItem = { ...item, GridY: offsetY, isUserMove: false }
@@ -90,7 +60,7 @@ export const layoutCheck = (layout: DragactLayoutItem[], layoutItem: GridItemEve
         } else if (fristItemkey === key) {
 
             /**永远保持用户移动的块是 isUserMove === true */
-            return { ...item, ...layoutItem, isUserMove: true }
+            return { ...item, ...layoutItem }
         }
 
         return item

src/lib/util/compact.ts

@@ -1,6 +1,7 @@
 import { sortLayout } from "./sort";
 import { getFirstCollison } from "./collison";
-import { DragactLayoutItem } from "../dragact";
+import { DragactLayoutItem, mapLayout } from "../dragact";
+import { GridItemEvent } from "../GridItem";
 
 /**
  * 压缩单个元素，使得每一个元素都会紧挨着边界或者相邻的元素
@@ -34,15 +35,30 @@ export const compactItem = (finishedLayout: DragactLayoutItem[], item: DragactLa
  * 压缩layout，使得每一个元素都会紧挨着边界或者相邻的元素
  * @param {*} layout 
  */
-export const compactLayout = (layout: DragactLayoutItem[]) => {
-    let sorted = sortLayout(layout)
+export const compactLayout = (layout: DragactLayoutItem[], movingItem: GridItemEvent | undefined) => {
+    let sorted = sortLayout(layout)//把静态的放在前面
     const needCompact = Array(layout.length)
     const compareList = []
+    const mapLayout: mapLayout = {};
+
     for (let i = 0, length = sorted.length; i < length; i++) {
         let finished = compactItem(compareList, sorted[i])
-        finished.isUserMove = false
+        if (movingItem) {
+            if (movingItem.UniqueKey === finished.key) {
+                movingItem.GridX = finished.GridX;
+                movingItem.GridY = finished.GridY;
+                finished.isUserMove = true
+            } else
+                finished.isUserMove = false
+        }
+        else
+            finished.isUserMove = false
         compareList.push(finished)
         needCompact[i] = finished
+        mapLayout[finished.key + ''] = finished;
+    }
+    return {
+        compacted: needCompact,
+        mapLayout
     }
-    return needCompact
 }

src/lib/util/initiate.ts

@@ -1,4 +1,5 @@
-import { DragactLayoutItem } from "../dragact";
+import { DragactLayoutItem, mapLayout } from "../dragact";
+import { GridItemEvent } from "../GridItem";
 
 /**
  * 把用户移动的块，标记为true
@@ -8,17 +9,16 @@ import { DragactLayoutItem } from "../dragact";
  * @param {*} GridY 
  * @param {*} isUserMove 
  */
-export const syncLayout = (layout: DragactLayoutItem[], key: number | string, GridX: number, GridY: number, isUserMove: Boolean) => {
-    const newlayout = layout.map((item) => {
-        if (item.key === key) {
-            item.GridX = GridX
-            item.GridY = GridY
-            item.isUserMove = isUserMove
-            return item
+export const syncLayout = (layout: DragactLayoutItem[], movingItem: GridItemEvent) => {
+    for (const idx in layout) {
+        if (layout[idx].key === movingItem.UniqueKey) {
+            layout[idx].GridX = movingItem.GridX
+            layout[idx].GridY = movingItem.GridY
+            layout[idx].isUserMove = true
+            break;
         }
-        return item
-    })
-    return newlayout
+    }
+    return layout
 }
 
 
@@ -42,12 +42,8 @@ export const MapLayoutTostate = (layout: DragactLayoutItem[], children: any[]) =
  * @param {*} layout 输入进来的布局
  * @param {*} key 
  */
-export const layoutItemForkey = (layout: DragactLayoutItem[], key: number) => {
-    for (let i = 0, length = layout.length; i < length; i++) {
-        if (key === layout[i].key) {
-            return layout[i]
-        }
-    }
+export const layoutItemForkey = (layout: mapLayout, key: number) => {
+    return layout[key]
 }