我添加了喜欢"帖子的功能.突然,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.
更多推荐
永远更新本机反应状态
发布评论