Question

我添加了“喜欢＆＃39;一个帖子。突然反应本地人正以蜗牛的速度爬行。我是新人，所以不确定在何时何地正确设置状态。

我应该如何在listView表中正确附加类似行的能力？

继承代码......

＆＃39;喜欢＆＃39;要点击的文字就是这个....

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

然后喜欢＆＃39;功能就是这个......

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分钟的加载时间？（明显的内存泄漏）??

此外，是否可以只增加＆＃39; DOM＆＃39;没有触发重新渲染？

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查看调试消息。

在react-native中更新状态永远

2 个答案: