react-native 中永久更新状态

Question

我添加了“喜欢”帖子的功能。 突然间，react-native 正以蜗牛般的速度爬行。 我是新手，所以不确定何时何地正确设置状态。

我应该如何在 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

渲染你的 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)
        });
      }
    }
  });

}

或者禁用chrome调试，使用android monitor查看调试信息。