反应：在列表混洗的连续呈现中会发生什么？

Question

我想创建一个随机随机播放一些动画的列表。

这里是the fiddle对于它我用key道具来识别每个孩子。

http://jsfiddle.net/1wcpLLg4/

var ListAnimate = React.createClass({ 
    list: [ 
     {id: 1, caption: "Hello"}, 
     {id: 2, caption: "There"}, 
     {id: 3, caption: "Whatsup"}, 
     {id: 4, caption: "Sanket"}, 
     {id: 5, caption: "Sahu"}, 
    ], 
    shuffle: function() { 
     this.list.shuffle(); // Shuffles array! 
     this.forceUpdate(); 
    }, 
    render: function() { 
     return <div> 
      <button onClick={this.shuffle}>Shuffle</button> 
      <ul> 
       {this.list.map(function(el, i){ 
        return <li key={el.id} style={ {top: (i*60)+'px'} }>{el.caption} {el.id}</li>; 
       })} 
      </ul> 
     </div>; 
    } 
}); 

React.render(<ListAnimate />, document.body); 

从React docs about Dynamic Children，它指出key支柱，以便在连续呈现，以确定在数组中的元素使用。因此，刚刚重新排序的项目不能卸载并安装到新的位置，而应该重新定位，但似乎并不在小提琴中发生，其中列表顶部的节点总是未安装并安装在不同的位置。

但是对于底部的元素似乎与动画效果很好。

Answer 1

我创建了一个小提琴，以显示li元素实际上未安装/卸载。

http://jsfiddle.net/jq9p7hnd/

我已经转换li元件MyLi元件和记录的消息时componentDidMount和componentWillUnmount函数被调用。只有componentDidMount回调期间称为第一渲染和他们都不洗牌后，被称为：

var MyLi = React.createClass({ 


    componentDidMount : function(){ 
     console.log("MyLi component did mount."); 
    }, 

    componentWillUnmount : function(){ 
     console.log("MyLi component will unmount."); 
    }, 

    render : function(){ 

     return <li {...this.props}>{this.props.children}</li> 

    } 
}); 

var ListAnimate = React.createClass({ 
    list: [ 
     {id: 1, caption: "Hello"}, 
     {id: 2, caption: "There"}, 
     {id: 3, caption: "Whatsup"}, 
     {id: 4, caption: "Sanket"}, 
     {id: 5, caption: "Sahu"}, 
    ], 
    shuffle: function() { 
     this.list.shuffle(); 
     this.forceUpdate(); 
    }, 
    render: function() { 
     return <div> 
      <button onClick={this.shuffle}>Shuffle</button> 
      <ul> 
       {this.list.map(function(el, i){ 
        return <MyLi key={el.id} style={ {top: (i*60)+'px'} }>{el.caption} {el.id}</MyLi>; 
       })} 
      </ul> 
     </div>; 
    } 
}); 
window.React = React; 
React.render(<ListAnimate />, document.body); 









Array.prototype.shuffle = function() { 
    var i = this.length, j, temp; 
    if (i == 0) return this; 
    while (--i) { 
    j = Math.floor(Math.random() * (i + 1)); 
    temp = this[i]; 
    this[i] = this[j]; 
    this[j] = temp; 
    } 
    return this; 
} 

Answer 2

请记住，你正在寻找的那种动画，你需要始终保持DOM在同订单并只更新它们在组件的渲染功能中的位置。

我修改使用这种策略的第一小提琴：http://jsfiddle.net/0maphg47/1/

render: function() { 
    // create a sorted version of the list to render the DOM 
    var sortedCopy = this.state.list.slice().sort(function(a, b) { 
     return a.id - b.id; 
    }); 

    return <div> 
     <button onClick={this.shuffle}>Shuffle</button> 
     <ul> 
      {sortedCopy.map(function(el, i) { 
       // find the position of the element in the shuffled list 
       // which gives the position the element must be 
       var pos = this.state.list.indexOf(el); 
       return <li key={el.id} style={ {top: (pos*60)+'px'} }> 
        {el.caption} {el.id} 
       </li>; 
      }, this)} 
     </ul> 
    </div>; 
} 

仍然有改进的余地，但我会离开，给你。