反应本机性能问题

我正在使用congap api来首先获取大约1500+加密货币的数据,然后使用Web-socket来更新加密货币的更新值.

我在这里使用redux来管理我的状态

在我的内部componentDidMount(),我正在调用一个可以获取硬币价值的redux动作 fetchCoin

componentDidMount() {
    this.props.fetchCoin()
  }

然后在return我做这样的事情

  (
           

然后我有一个web-socket来更新加密货币的价值

 componentDidUpdate() {
    if (this.state.updateCoinData || this.updateCoinData.length <1 ) {
      this.updateCoinData = [...this.props.cryptoLoaded];
     this.setState({updateCoinData: true})
    }
      this.socket.on('trades', (tradeMsg) => {
      for (let i=0; i

现在,虽然这项工作,问题是这会让我的应用程序像地狱一样慢,因为每当套接字发送新数据时,它必须呈现每个组件,因此触摸和搜索等事件需要花费大量时间来执行.[更新]事实证明我的应用程序正在渲染一些东西如果我删除套接字连接,请查看更新2 

[问题:]我应该怎样做才能提高App的性能？(不喜欢使用状态或使用DOM来更新我的应用程序等等).

[更新1:]我用的https://github.com/irohitb/Crypto而这两个是js文件,所有的逻辑正在发生 
 https://github.com/irohitb/Crypto/blob/master/src/container /cryptoContainer.js 
https://github.com/irohitb/Crypto/blob/master/src/components/CoinCard.js 
我也从map转到Flatlist.

[更新:2]我发现在我的应用程序中发生了无休止的渲染,这可能让我的线程忙碌(我的意思是它是无穷无尽的,不必要地传递道具).我在单独的Stackoverflow线程上问了同样的问题,但没有得到正确的响应,因为它与性能有关,我想在这里给它一个赏金.

请检查此线程:无限渲染React

[答案更新:]虽然这里有很多很好的答案,但万一有人想了解它是如何工作的,你可以克隆我的存储库并在此提交之前返回.我已将提交链接到我的问题已解决的位置(因此您可能需要返回并查看我做错了什么).此外,所有答案都非常有用,不难理解,所以你一定要仔细阅读.


1> basbase..：
每次组件更新时,它都会启动一个新的套接字,导致内存泄漏,并导致this.props.updateCrypto(updateCoinData);对同一数据多次调用.这可以通过打开插座componentDidMount()并将其关闭来解决componentWillUnmount().

您还可以缓冲多个记录更新,并每隔几秒钟一次更改FlatList数据. 

编辑,工作示例(App.js):

import React, { Component } from 'react';
import { Text, View, FlatList } from 'react-native';
import SocketIOClient from 'socket.io-client';

type Props = {};
export default class App extends Component {
    constructor(props) {
        super(props);

        this.currencies = {};
        this.state      = {
            currenciesList: [],
        }
    }

    componentDidMount() {
        this.socket = SocketIOClient('https://coincap.io');

        this.socket.on('trades', (tradeMsg) => {
            const time = new Date();

            // Store updates to currencies in an object
            this.currencies[tradeMsg.message.msg.short] = {
                ...tradeMsg.message.msg,
                time: time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds(),
            };

            // Create a new array from all currencies
            this.setState({currenciesList: Object.values(this.currencies)})
        });
    }

    componentWillUnmount() {
        this.socket.disconnect();
    }

    render() {
        return (
             item.short}
                renderItem={({item}) => 
                    {item.time}
                    {item.short}
                    {item.perc}
                    {item.price}
                }
            />
        );
    }
}

        

2> xadm..：
有许多标准方法可以提高应用程序的性能,最常见的是:


使用通常的反应优化(shouldComponentUpdate,PureComponent  - 读取文档)
使用虚拟列表(限制数据的可见部分)


在这种情况下,我会添加:

不要在优化之前处理数据 - 格式化未更改的数据至少是不必要的.您可以插入中间组件(优化层),该组件将仅将格式化数据传递/更新为"原始数据"更改.

您可能不需要终极版在所有(在状态存储数据)当数据在同一个地方/结构简单,使用.当然,您可以将redux用于其他全局共享应用程序状态(fe过滤选项).

使用(react-native),搜索更合适？

UPDATE

有些代码在平均时间(repo)中发生了变化,此时(08.09)仍存在一个问题,可能导致内存泄漏.

您正在呼叫this.socket.on每个componentDidUpdate呼叫(错误编码的条件) - 不断添加新的处理程序!

componentDidUpdate() {
  // call all ONLY ONCE afer initial data loading
  if (!this.state.updateCoinData && !this.props.cryptoLoaded.length) {
    this.setState({updateCoinData: true}) // block condition
    this.socket.on('trades', (tradeMsg) => {

      // slice() is faster, new array instance
      // let updateCoinData = [...this.props.cryptoLoaded]; 
      let updateCoinData = this.props.cryptoLoaded.slice();

      for (let i=0; i

次要错误:初始提取状态在reducer中设置为true.

搜索性能问题我会看:


使它成为PureComponent;
increased并且decreased不需要在强制不必要的渲染调用的状态下保存;
我会使用更新时间(不保存在状态,只是作为父项中的prop传递,仅用于更新的行,在updateCoinData上面的代码中)并且仅为可见项导出方向(仅检查0和符号)差异(已计算perc)(来自渲染)并且仅在时间限制期间(渲染时间和数据更新道具之间的差异).也可以用.setTimeout
最后删除componentWillReceiveProps,componentDidUpdate并且shouldComponentUpdate(高度？)提高性能;