Я использую совпадение api, чтобы сначала извлечь данные о 1500+ криптовой валюте, а затем Web-socket для обновления обновленного значения криптовалюты.
Я использую redux для управления своим состоянием здесь
Inside My componentDidMount()
, я называю перевождь действие fetchCoin
, который извлекает значение монеты
componentDidMount() {
this.props.fetchCoin()
}
И затем return
я делаю что-то вроде этого
<FlatList
data={this.state.searchCoin ? displaySearchCrypto : this.props.cryptoLoaded}
renderItem={({ item }) => (
<CoinCard
key={item["short"]}
coinShortName = {item["short"]}
coinName = {item["long"]}
coinPrice = {item["price"].toFixed(2)}
percentChange = {item["perc"].toFixed(2)}
/>
Тогда у меня есть веб-сокет, который обновляет значение криптовалюта, как это
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< this.updateCoinData.length; i++) {
if (this.updateCoinData[i]["short"] == tradeMsg.coin ) {
//Search for changed Crypto Value
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);
}
}
})
}
Теперь, несмотря на эту проблему, проблема в том, что это замедляет мое приложение, как ад, когда всякий раз, когда сокет отправляет новые данные, он должен отображать каждый компонент и, следовательно, события, такие как touch и search, требуют много времени для выполнения. [Update] Оказывается, мое приложение ничего не делает. Если я удалю подключение сокетов, проверьте обновление 2
[Вопрос:] Что мне делать, чтобы улучшить производительность приложения? (Что-то вроде не использования состояния или использования 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 Я также перехожу из карты в Flatlist.
[Update: 2] Я обнаружил, что внутри моего приложения происходит бесконечная визуализация, которая, вероятно, удерживает мой поток занятым (я имею в виду, что он бесконечен и излишне пропускает реквизит). Я задал один и тот же вопрос в отдельном qaru.site/info/16304129/... но не получил надлежащего ответа, и поскольку он связан с производительностью, я подумал о том, чтобы наложить на него щедрость.
Пожалуйста, проверьте эту тему: бесконечный Render in React
[Ответ Обновление:] В то время как есть много больших ответов здесь, на всякий случай, если кто хочет понять, как это работает, Вы могли бы клонировать мой репозиторий и вернуться до этого совершить. Я связал фиксацию с тем моментом, когда мои проблемы были решены (так что вам, возможно, потребуется вернуться и посмотреть, что я делаю неправильно). Кроме того, все ответы были очень полезны и не трудно понять, поэтому вам обязательно нужно пройти через них.