React Native Touch 事件响应非常慢答案

【问题标题】：React Native Touch events responding very slowReact Native Touch 事件响应非常慢
【发布时间】：2018-08-28 17:18:12
【问题描述】：

我在 React 中创建了一个非常简单的第一个 Native 应用程序，但我的应用程序对触摸等事件的响应非常缓慢

正如建议的那样，我已经实现了几件事，比如实现 FlatList 而不是映射等等..

我认为我可能做错的两件事是更新状态

componentDidUpdate() {

var updateCoinData = [...this.props.cryptoLoaded];
 socket.on('trades', (tradeMsg) => {
  for (let i=0; i<updateCoinData.length; i++) {

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

    //Search for changed Crypto Value
    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);

      }
    }
 })

或者可能在我的子组件中过于频繁地调用setState。

如果有人想要参考，这是指向我的存储库的链接 https://github.com/irohitb/Crypto

这是大多数操作发生的两个文件

Child Repository

Parent Repository

我知道问的可能太多了，但是有人可以帮助我/建议我如何提高其性能。

【问题讨论】：

你正在更新循环内的 redux ！它应该被调用一次而不是 updateCoinData.length 次
@xadm 它在循环的 if 条件下被更新。详细地说，套接字消息包含有关其值已更新的特定加密货币的信息。我尝试在我的if 条件中添加break;，但这对我没有帮助。
如果条件多次为真？消息是针对一个 id 的？？
@xadm 只有一次，但 socket.io 可能每秒发送一次消息。我正在使用github.com/CoinCapDev/CoinCap.io
componentDidUpdate 被多次调用，重命名此方法并从 componenDidMount 调用

标签： reactjs react-native

【解决方案1】：

有一个“结构错误”，redux 滥用。与问题（表现）没有直接关系，但可以有一些间接关系。

您在本地处理状态/数据，而 这是 reducer 的责任。

您应该从套接字数据准备有效负载并分派 redux 操作/消息。 Reducer 应该创建 prev state 的副本（使用 slice() 复制数组，spread operator '...' 很慢），搜索匹配的 id，更新它并作为新 state 返回。

reducer 的主要思想是提取状态转换的逻辑以便简单地测试。只存储/接收准备好的数据集可以测试什么？

【讨论】：

如果您可以为此分享或添加示例，那将是一个很大的帮助您正在本地处理状态/数据，而这是减速器的责任
任何 redux 待办事项应用程序 .. ADD_TODO 仅发送一条记录的有效负载，reducer 将其附加到列表（或更新记录） - 大量关于此的教程