我的实时 React Native 列表更新很慢答案

【问题标题】：My real-time React Native list is very slow to update我的实时 React Native 列表更新很慢
【发布时间】：2018-01-13 17:11:41
【问题描述】：

我需要一个 React Native 中的列表，它会在 socket.io 发送数据时更新。

我已经设置好一切并尝试过：

列表视图
FlatList 和
我自己的基本 JavaScript 组件数组

列表600长，数据需要动态（大约3次/秒socket.io数据进来，我更新列表对应索引）。当我向下滚动时，问题就出现了，一切都变慢了很多并且停止并且列表停止更新。

该列表基本上不能处理超过 40 个我的轻量级组件。这里有没有更好的方法来更新列表。

有什么技巧可以正确渲染并跟上传入的数据吗？

【问题讨论】：

你试过在 listview/scrollview 属性中设置removeClippedSubviews = {true} 吗？我相信它可以提高这么多项目的性能
嘿 Ryan，我确实尝试过，但没有看到明显的差异。不过也许有一点帮助。让我烦恼的是，我可以制作一个普通的 javascript 数组并在中呈现所有 600 个数据点，并且应用程序跟上，并且将 socket.io 数据拉入其中的实例出现在屏幕上。但是，当我尝试将此数据作为道具发送到子组件（这是一个超级简单的组件）时，一切都会变慢。任何其他提示都会非常有帮助。在这上面花了最后 14 个小时，却一无所获。有没有办法只渲染屏幕上的内容而不是上方或下方的内容？
你能发布一些代码吗？（尽可能少）。 removedClippedSubviews 道具就是这样做的，只有当它们出现在屏幕上时才会渲染它们

标签： arrays reactjs listview react-native

【解决方案1】：

您可能需要检查您的 registerServiceWorker.js 是否设置正确以及服务是否按预期运行。检查您的 index.js 文件以包含

import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

有关其工作原理，另请参阅 https://goo.gl/KwvDNy。

参见例如文件中的注释：

// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374

【讨论】：