如何在React Native中处理客户端WebSocket数据流，因为状态频繁更改我的屏幕冻结

我实际上是建立一个客户端纸交易应用程序使用React本地从数据提供者使用WebSocket提供的数据，假设如果我订阅'A'和'B'和...，我得到他们的数据在Websocket流..我尝试使用usestate把数据放在状态和附加在以前的状态，并通过它的组件，由于状态更改过于频繁，数据更改非常频繁，因此正在重新呈现整个组件...请帮助我如何处理数据的频繁更改
注：这是一个WebSocket流，过于频繁的状态更改导致重新渲染会导致性能问题，如果有任何可能的有效方法来处理react native中过于频繁的数据更改，请建议......实时到来的数据只需要显示，不需要保存并显示在用户界面上，而不会影响性能
以下是我的主屏幕代码：

import { View, Text, SafeAreaView, Image, Dimensions, TouchableOpacity } from 'react-native'
import React, { useEffect, useState } from 'react'
import HomeScreenChart from './HomeScreenChart'
import { ScrollView } from 'react-native-gesture-handler'
import Strikes from './Strikes';

const url = "WebsocketURL";
var ws = new WebSocket(url);

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height
const SPACING = 12

export default function HomeScreen() {
var recieveddata = []
var requestArray = ["nse_cm_nifty_50","nse_cm_nifty_bank","nse_fno_banknifty_05012023_43000_ce","nse_fno_banknifty_05012023_43000_pe","nse_fno_banknifty_05012023_43100_ce","nse_fno_banknifty_05012023_43100_pe","nse_fno_banknifty_05012023_43200_ce","nse_fno_banknifty_05012023_43200_pe","nse_fno_banknifty_05012023_43300_ce","nse_fno_banknifty_05012023_43300_pe","nse_fno_banknifty_05012023_43400_ce","nse_fno_banknifty_05012023_43400_pe","nse_fno_banknifty_05012023_43500_ce","nse_fno_banknifty_05012023_43500_pe"]
const [marketData, setmarketData] = useState({})
const CallWebSocket = async () =>{
ws.onopen = () => {
var requestString = ''
for (var i=0;i<requestArray.length;i++){
if(i==requestArray.length-1){
requestString = requestString+requestArray[i]
}else{
requestString = requestString+requestArray[i]+','
}
}
ws.send('type=msubscribe&'+requestString+'&columns=20'); // send a message
};
ws.onmessage =  async e => {
var text =  new Response(e.data).text();
text.then( (res)=>{
recieveddata = []
var responsedata = res.split('\n')
for  (var i=0;i<responsedata.length-2;i++){
var tempdata = responsedata[i].split('|')
recieveddata.push(`{index:${i}, name:${tempdata[0]}, value:${tempdata[1]}}`)               
}
//console.log(recieveddata)
})
};
ws.onerror = e => {
console.log(e.message);
};
ws.onclose = e => {
console.log(e.code, e.reason);
};

}
useEffect(() => {
CallWebSocket()
}, [])


return (
<SafeAreaView style={{flex:1 ,backgroundColor:'#ebecee',shadowColor:'black',borderBottomStartRadius:10,borderBottomEndRadius:10}}>
<View>
<View style={{padding:20}}>
<Text style={{fontSize:30,fontWeight:'bold'}}>Marketwatch</Text>
</View>
<View style={{flexDirection:'row',marginTop:5,justifyContent:'space-around'}}>
<View style={{flexDirection:'column'}} >
<Text style={{fontSize:25, color:'#4c80cf', fontWeight:'500',textAlign:'center'}}> NIFTY 50 </Text>
<TouchableOpacity><Text style={{fontSize:30, fontWeight:'800',alignSelf:'center'}}>{marketData.nse_cm_nifty_50}</Text></TouchableOpacity>
</View>
<View style={{flexDirection:'column'}} >
<Text style={{fontSize:25, fontWeight:'500'}}> BANK NITFTY</Text>
<TouchableOpacity><Text style={{fontSize:30, fontWeight:'800',alignSelf:'center'}}>{marketData.nse_cm_nifty_bank}</Text></TouchableOpacity>
</View>
</View>
<View style={{width:width-20,borderRadius:5,backgroundColor:'#810a0a',height:60,justifyContent:'space-around',alignItems:'center',alignSelf:'center',marginTop:10,marginBottom:5,flexDirection:'row'}}>
<Text style={{color:'white',fontSize:25,fontWeight:'400'}}>Expiry </Text>
<Text style={{color:'white',fontSize:25,fontWeight:'400'}}>5-DEC-2023</Text>
</View>
</View>
<ScrollView style={{flex:1 ,backgroundColor:'white',width:width,marginTop:5,height:height}} showsVerticalScrollIndicator={false}>
<View style={{flex:1, padding:20,flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginTop:5,marginBottom:0}}>
<Text style={{color:'green',fontSize:15,fontWeight:'800'}}>CALLS</Text>
<Text style={{color:'black',fontSize:20,fontWeight:'800',textDecorationLine:'underline'}}>STRIKE</Text>
<Text style={{color:'red',fontSize:15,fontWeight:'800'}}>PUTS </Text>
</View>
<View style={{ borderBottomColor: '#ebecee', borderBottomWidth:2,}}/>
{/* <Strikes strike={43000} ce={marketData.nse_fno_banknifty_05012023_43000_ce} pe={marketData.nse_fno_banknifty_05012023_43000_pe}/>
// <Strikes strike={43100} ce={marketData.nse_fno_banknifty_05012023_43100_ce} pe={marketData.nse_fno_banknifty_05012023_43100_pe}/>
// <Strikes strike={43200} ce={marketData.nse_fno_banknifty_05012023_43200_ce} pe={marketData.nse_fno_banknifty_05012023_43200_pe}/>
// <Strikes strike={43300} ce={marketData.nse_fno_banknifty_05012023_43300_ce} pe={marketData.nse_fno_banknifty_05012023_43300_pe}/>
// <Strikes strike={43400} ce={marketData.nse_fno_banknifty_05012023_43400_ce} pe={marketData.nse_fno_banknifty_05012023_43400_pe}/>
// <Strikes strike={43500} ce={marketData.nse_fno_banknifty_05012023_43500_ce} pe={marketData.nse_fno_banknifty_05012023_43500_pe}/> */}
</ScrollView>
</SafeAreaView>
)
}

如果您正在渲染计算繁重的UI元素（如图表），则无需考虑为每个新的流数据更新更新UI。
理想情况下，解决方案是去抖动流更新至少2秒，以便更新UI。

function debounce(func, timeout = 2000) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  };
}

const CallWebSocket = async () => {
  // Minimum time to update UI for new stream data in milliseconds
  const STREAM_UPDATE_TRESHOLD = 2000;

  const onMessage = (e) => {
    var text = new Response(e.data).text();
    text.then((res) => {
      recieveddata = [];
      var responsedata = res.split("\n");
      for (var i = 0; i < responsedata.length - 2; i++) {
        var tempdata = responsedata[i].split("|");
        recieveddata.push(
          `{index:${i}, name:${tempdata[0]}, value:${tempdata[1]}}`
        );
      }
      //console.log(recieveddata)
    });
  };
  ws.onopen = () => {
    var requestString = "";
    for (var i = 0; i < requestArray.length; i++) {
      if (i == requestArray.length - 1) {
        requestString = requestString + requestArray[i];
      } else {
        requestString = requestString + requestArray[i] + ",";
      }
    }
    ws.send("type=msubscribe&" + requestString + "&columns=20"); // send a message
  };
  ws.onmessage = debounce(onMessage, STREAM_UPDATE_TRESHOLD);
  ws.onerror = (e) => {
    console.log(e.message);
  };
  ws.onclose = (e) => {
    console.log(e.code, e.reason);
  };
};

如何在React Native中处理客户端WebSocket数据流，因为状态频繁更改我的屏幕冻结

1条答案

相关问题

热门标签

最新问答