fix sort confusion

Author: jljsj33

examples/dynamic.js

@@ -19,6 +19,12 @@ const App = React.createClass({
       }, {
         children: '依次进入4',
         key: 4,
+      }, {
+        children: '依次进入5',
+        key: 5,
+      }, {
+        children: '依次进入6',
+        key: 6,
       }],
     };
   },
@@ -69,13 +75,28 @@ const App = React.createClass({
     });
     this.setState({ items });
   },
+  removeAndAddTow() {
+    const items = this.state.items;
+    items.splice(items.length - 1, 1);
+    items.splice(items.length - 2, 1);
+    items.push({
+      children: `新节点${Date.now()}`,
+      key: this.index++,
+    });
+    items.unshift({
+      children: `新节点${Date.now()}-top`,
+      key: this.index++,
+    });
+    this.setState({ items });
+  },
   render() {
     return (
       <div>
         <button onClick={this.add}>点击新增</button>
         <button onClick={this.addTwo}>点击新增两个</button>
         <button onClick={this.removeAll}>移出所有</button>
         <button onClick={this.removeAndAdd}>移出与添加</button>
+        <button onClick={this.removeAndAddTow}>头尾添加与移出两个</button>
         <QueueAnim>
           {this.state.items.map((item) => <div key={item.key}>
             {item.children} <a href="#" onClick={this.remove.bind(this, item.key)}>删除</a>

src/utils.js

@@ -29,6 +29,7 @@ export function mergeChildren(prev, next) {
   // the combined list
   const nextChildrenPending = {};
   let pendingChildren = [];
+  let followChildrenKey;
   prev.forEach((c) => {
     if (!c) {
       return;
@@ -38,11 +39,14 @@ export function mergeChildren(prev, next) {
         nextChildrenPending[c.key] = pendingChildren;
         pendingChildren = [];
       }
+      followChildrenKey = c.key;
     } else if (c.key) {
       pendingChildren.push(c);
     }
   });
-
+  if (!followChildrenKey) {
+    ret = ret.concat(pendingChildren);
+  }
   next.forEach((c) => {
     if (!c) {
       return;
@@ -51,13 +55,8 @@ export function mergeChildren(prev, next) {
       ret = ret.concat(nextChildrenPending[c.key]);
     }
     ret.push(c);
-  });
-
-  // 保持原有的顺序
-  pendingChildren.forEach((c) => {
-    const originIndex = prev.indexOf(c);
-    if (originIndex >= 0) {
-      ret.splice(originIndex, 0, c);
+    if (c.key === followChildrenKey) {
+      ret = ret.concat(pendingChildren);
     }
   });