更新状态反应本地采取永久

Question

我增加了'喜欢'一个职位的能力。 突然反应 - 原生爬行速度为蜗牛。 即时通讯新的反应，所以不确定何时何地正确设置状态。

我应该如何正确地附加像列的能力，在listView表中？

继承人的代码...

的 '喜欢' 的文字点击是这个....

<Text onPress={this.likePost.bind(this, feeditem.post_id)}>{feeditem.likes} likes</Text> 

那么 '喜欢' 功能，这是... ...

likePost(id){ 
    if(this.state.feedData!=null){ 
    var d = this.state.feedData; 
    // Find row by post_id 
    var ix = d.findIndex(x => x.post_id===id); 
    // Only set state if user hasn't already liked 
    if(d[ix].you_liked==0){ 

     // Mark as liked, and increment 
     d[ix].you_liked=true; 
     d[ix].likes = parseInt(d[ix].likes)++; 

     // Set the state after liking 
     this.setState({ 
     feedData: d, 
     feedList: this.state.feedList.cloneWithRows(d) 
     }); 
    } 
    } 
} 

它的工作原理，它正确地更新数据，并显示在开发工具就好。然而，新视觉状态的渲染花费了一分钟。

我是否更新状态错误？ setState的成本是多少？我认为反应应该是重新呈现它在虚拟DOM中看到的变化。为什么然后它看起来像它重新渲染我的整个listView。为什么超过1分钟的加载时间？ （明显的内存泄漏）？

此外，是否可以只增加'DOM'上的整数而不触发重新渲染？

Answer 1

渲染你的ListView传递dataSource和renderRow道具

render() { 
    return (
    <ListView 
    dataSource={this.state.dataSource} 
    renderRow={this._renderRow}/> 
); 
} 

创建renderRow功能，在这里你可以访问您的数据并单击行指数

_renderRow = (rowData, sectionIndex, rowIndex, highlightRow) => { 
    return (
    <TouchableOpacity onPress={() => { 
     //Here you shoud update state 
    }}/> 
); 
}; 

此外，你总是需要做的副本在操纵它之前的一个状态，因为它是不变的对象。尝试使用状态变异库，使用https://facebook.github.io/react/docs/update.html或其他选项。

Answer 2

因为chrome调试器，动画可能需要很长时间。 减轻这方面的一个小方法是使用InteractionManager

likePost(id){ 
    InteractionManager.runAfterInteractions(() => { 
    if(this.state.feedData!=null){ 
     var d = this.state.feedData; 
     // Find row by post_id 
     var ix = d.findIndex(x => x.post_id===id); 
     // Only set state if user hasn't already liked 
     if(d[ix].you_liked==0){ 

     // Mark as liked, and increment 
     d[ix].you_liked=true; 
     d[ix].likes = parseInt(d[ix].likes)++; 

     // Set the state after liking 
     this.setState({ 
      feedData: d, 
      feedList: this.state.feedList.cloneWithRows(d) 
     }); 
     } 
    } 
    }); 

} 

或禁用铬调试和使用Android监视器，查看调试信息。