我最近开始做反应（和反应本地人一起），很多事情对我来说都很陌生 . 我正在使用react native创建一个应用程序，它实时显示加密货币 Value .

硬币帽提供Web套接字连接，以便自动更新新值，而不是使用axios获取整个内容 .

现在，在简单的HTML和javascript世界中，我为元素分配了一个ID，并且每当新数据来自web-socket时使用 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;

[Question] 在反应中，我仍然可以为元素分配一个ID，但是我们如何做这样的事情（使用web-socket来更新数据）？另外，请记住反应组件如何渲染（或重新渲染）事物 .

[Update] 我正在使用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);

Note ：最初通过axios（ajayx）获取所有数据，websocket仅发送获取数据的更改

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

javascript reactjs react-native