更新React Native

Question

我最近开始使用react（与react-native并存），很多事情对我来说都是陌生的。我正在React Native中创建一个应用程序，该应用程序实时显示加密货币值。

硬币帽提供网络套接字连接，因此新值将自动更新，而不是使用axios提取全部内容。

现在，在简单的HTML和javascript世界中，每当新数据来自网络套接字时，我就为元素分配一个ID，并使用for loop来查找我需要更新（或更改）的值。

类似这样

var socket = io.connect('https://coincap.io');
socket.on('trades', function (tradeMsg) {
  var crypto = tradeMsg.coin;
  for (let i=0; i<500; i++) {
    var compare = cryptoSName[i].innerHTML;
    if (compare == crypto) {
      var oldPrice = document.getElementById('price' + i).innerHTML;
      document.getElementById('price' + i).innerHTML= (tradeMsg.message.msg.price.toFixed(4));;
      document.getElementById('perc' + i).innerHTML= tradeMsg.message.msg.perc + "%";
      document.getElementById('pricer1' + i).innerHTML= (tradeMsg.message.msg.price.toFixed(4));;
      document.getElementById('percr1' + i).innerHTML= tradeMsg.message.msg.perc + "%";
      var newPrice = tradeMsg.message.msg.price;

[问题] 在反应中，我仍然可以为元素分配ID，但是我们该如何做（使用网络套接字更新数据）呢？另外，请记住反应组件如何渲染（或重新渲染）事物。

[更新] 我正在使用Redux，它以一种状态存储数据。考虑一下

我从redux接收到的数据/状态（通过axios api调用，执行某些操作）

class cryptoTicker extends Component { 
  componentWillMount() {
    this.props.fetchCoin();
  }
  render() { 
    var CryptoData = this.props.cryptoLoaded;
    let displayCrypto = CryptoData.map(el => {
      return (
        <CoinCard
          key={el["long"]}
          coinPrice = {el["price"].toFixed(2)}
        />
      );
    });
    return (
      <ScrollView>{displayCrypto}</ScrollView>
    );
  }
} 
const mapStateToProps = state => {
  return {
    cryptoLoaded: state.posts.itemsSucess
  }
};
export default connect(mapStateToProps, {fetchCoin})(cryptoTicker);

注意：最初，所有数据都是通过axios（ajayx）提取的，而websocket仅发送获取数据中的更改

以防万一：这是coincap api文档的链接 https://github.com/CoinCapDev/CoinCap.io