永远更新反应中的状态

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的成本是多少？ 我认为react应该只是重新呈现它在虚拟DOM中看到的更改。 为什么然后看起来好像重新渲染了整个listView。 为什么加载时间超过1分钟？ （某处明显的内存泄漏）？

另外，是否可以在不触发重新渲染的情况下仅增加“ DOM”上的整数？

Answer 1

渲染传递dataSource和renderRow道具的ListView

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)
        });
      }
    }
  });

}

或禁用Chrome调试，然后使用android Monitor查看调试消息。