Ответ 1

Как сказал Bhojendra Rauniyar, вы должны использовать shouldComponentUpdate в CoinCard. Вероятно, вы также захотите изменить свой FlatList, ваш уменьшенный образец имеет FlatList в ScrollView, это приводит к тому, что FlatList будет полностью расширяться, тем самым одновременно отображая все элементы.

class cryptoTicker extends PureComponent {

      componentDidMount() {
        this.socket = openSocket('https://coincap.io');
        this.props.fetchCoin()
        this.props.CurrencyRate()

        this.socket.on('trades', (tradeMsg) => {

            for (let i=0; i< this.updateCoinData.length; i++) {

                if (this.updateCoinData[i]["short"] == tradeMsg.coin ) {

                    //Search for changed Crypto Value
                    this.updateCoinData["short"] = tradeMsg["message"]["msg"]["short"]
                    this.updateCoinData[i]["perc"] = tradeMsg["message"]["msg"]["perc"]
                    this.updateCoinData[i]["price"] = tradeMsg["message"]['msg']['price']

                    //Update the crypto Value state in Redux
                    this.props.updateCrypto(this.updateCoinData);

                }
            }
        })

      }

      componentWillReceiveProps(newProps){
        // Fill with redux data once
        if (this.updateCoinData.length < 1 && newProps.cryptoLoaded) {
            this.updateCoinData = [...newProps.cryptoLoaded];
        }
      }

    render() {

        return (
            <View style={{height: '100%'}}>
                <Header/>
                <FlatList
                    style={{flex:1}}
                    data={this.props.cryptoLoaded}
                    keyExtractor={item => item.short}
                    initialNumToRender={50}
                    windowSize={21}
                    removeClippedSubviews={true}
                    renderItem={({item, index}) => (
                        <CoinCard
                            index={index}
                            {...item}
                        />
                    )}
                />
            </View>
        )
    }
}

class CoinCard extends Component {

    shouldComponentUpdate(nextProps) {
        return this.props.price !== nextProps.price || this.props.perc !== nextProps.perc
    }

    render() {
        console.log("here: " + this.props.index);

        return (
            <View>
                <Text> {this.props.index} = {this.props.long} </Text>
            </View>
        )
    }
}

Ответ 2

Каждый раз, когда ваш компонент обновляет, он запускает новый сокет, который приводит к утечке памяти и вызывает 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<Props> {
    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 (
            <FlatList
                data={this.state.currenciesList}
                extraData={this.state.currenciesList}
                keyExtractor={(item) => item.short}
                renderItem={({item}) => <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                    <Text style={{flex: 1}}>{item.time}</Text>
                    <Text style={{flex: 1}}>{item.short}</Text>
                    <Text style={{flex: 1}}>{item.perc}</Text>
                    <Text style={{flex: 1}}>{item.price}</Text>
                </View>}
            />
        );
    }
}

Ответ 3

Существует множество стандартных способов повышения эффективности реагирования приложений, наиболее распространенных:

• использовать обычную оптимизацию реакции (shouldComponentUpdate, PureComponent - читать документы)
• использовать виртуальные списки (ограничить видимые части данных)

В этом случае я бы добавил:

Не обрабатывайте данные перед оптимизацией - данные форматирования, которые не были изменены, по крайней мере, не нужны. Вы можете вставить промежуточный компонент (слой оптимизации), который будет передавать/обновлять форматированные данные в <CoinCard/> только при изменении исходных данных.

Вам может вообще не понадобиться Redux (хранить данные в состоянии), когда данные используются в одном месте/в простой структуре. Конечно, вы можете использовать redux для других общедоступных состояний приложения (параметры фильтрации).

Используйте <FlatList/> (реагировать-родной), ищите более подходящую?

ОБНОВИТЬ

Некоторый код был изменен в среднем времени (репо), в это время (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<updateCoinData.length; i++) {
        //Search for changed Crypto Value
        if (updateCoinData[i]["short"] == tradeMsg.coin ) {

          // found, updating from message
          updateCoinData[i]["long"] = tradeMsg["message"]["msg"]["long"]
          updateCoinData[i]["short"] = tradeMsg["message"]["msg"]["short"]
          updateCoinData[i]["perc"] = tradeMsg["message"]["msg"]["perc"]
          updateCoinData[i]["mktcap"] = tradeMsg['message']['msg']["mktcap"]
          updateCoinData[i]["price"] = tradeMsg['message']['msg']['price']

          //Update the crypto Value state in Redux
          this.props.updateCrypto(updateCoinData);

          // record found and updated, no more looping needed
          break;
        }
      }
    })
  }
}

Незначительные ошибки: начальные состояния выборки заданы как true в редукторах.

В поисках проблем с производительностью я бы посмотрел на <CoinCard/> :

• сделать его PureComponent;
• increased и decreased не требуются для сохранения в состоянии, которое вынуждает ненужные вызовы;
• Я бы использовал время обновления (не сохранено в состоянии, просто передано как prop в родительском и только для обновленных строк, в updateCoinData в коде выше) и выводит направление (только для проверки 0 и только знак) разности (уже рассчитанной в perc) только для видимые объекты (от рендера) и только в течение срока (разница между временем рендеринга и поддержкой обновления данных). setTimeout можно использовать.
• наконец, удаление componentWillReceiveProps, componentDidUpdate и shouldComponentUpdate должно (сильно?) повысить производительность;

Ответ 4

При рендеринге Flatlist вы должны рассмотреть возможность использования PureComponent или использование shouldComponentUpdate для обновления, только если это необходимо.

Из документа:

Если ваше приложение отображает длинные списки данных (сотни или тысячи строк), мы рекомендуем использовать метод, известный как "оконный". Этот метод только отображает небольшое подмножество ваших строк в любой момент времени и может значительно сократить время, необходимое для повторной обработки компонентов, а также количества созданных узлов DOM.

Взять глубокий путь к этому руководству по производительности.

Если вам по-прежнему нужен какой-то расширенный интерфейс, я рекомендую вам изучить следующие темы:

FlatList и VirtualizedList Производительность прокрутки отстает после строк 30+

Проблемы с производительностью при реагировании при использовании большого списка

Ответ 5

1. Вы никогда не должны выполнять вызовы API в методе жизненного цикла компонента React componentWillMount(), вместо этого это должно быть сделано в componentDidMount().

   Ознакомьтесь с этой очень аккуратной статьей о методах жизненного цикла и о том, что нужно сделать, в каком методе: https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d.

Многим будет предложено использовать эту функцию, чтобы отправить запрос на получение данных и ожидать, что данные будут доступны до того, как исходный рендер будет готов. Это не так - пока запрос будет инициализирован перед рендером, он не сможет закончить до вызова рендера.

2. Вместо создания сокета для обновления coinData вам может понадобиться использовать методы subscibe/unsubscribe redux.