永远更新本机反应状态

本文介绍了永远更新本机反应状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我添加了喜欢"帖子的功能.突然，react-native 以蜗牛般的速度爬行.我刚开始反应，所以不太确定在何时何地正确设置状态.

I added the ability to 'like' a post. And suddenly react-native is crawling at a snails pace. Im new to react so aren't really sure where and when to properly set state.

我应该如何在 listView 表中正确附加喜欢一行的功能??

How should I properly attach the ability to like a row, in a listView table??

这是代码...

要点击的喜欢"文字是这个....

The 'like' text to click on is this....

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

那么'喜欢'功能就是这个...

Then the 'liking' function is this...

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

它工作正常，它正确更新数据，并在开发工具中显示得很好.然而，新状态的视觉渲染需要一分钟多的时间.

It works, and it properly updates the data, and shows in the dev tools just fine. However, the rendering of the new state visually is taking over a minute.

我更新状态错了吗?setState 的成本是多少?我认为 React 应该只是重新渲染它在虚拟 DOM 中看到的更改.为什么它看起来像是在重新渲染我的整个 listView.为什么加载时间超过 1 分钟?(某处明显内存泄漏)??

Am I updating the state wrong? What is the cost for setState? I thought react was supposed to just re-render the changes it sees in the virtual DOM. Why then does it seem like its rerendering my entire listView. And why over 1 minute load time?? (obvious memory leak somewhere)??

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

Also, is it possible to just increment the integer on the 'DOM' without triggering re-renders?

推荐答案

由于 chrome 调试器，动画可能需要很长时间.缓解这种情况的一个小方法是使用 InteractionManager

Animations can take a long time because of the chrome debugger. A small way to mitigate this is using 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 监视器查看调试消息.

Or disable chrome debugging and use android monitor to see debugging messages.