反应本机性能问题

小编典典

反应本机性能问题

reactjs

我正在使用coincap api首先获取大约1500多种加密货币的数据，然后通过网络套接字更新加密货币的更新值。

我正在使用redux在这里管理我的状态

在My内部componentDidMount()，我正在调用 redux动作 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);

          }
        }
      })
  }

现在，尽管这项工作有效，但问题在于，这使我的应用程序变慢了，因为每当套接字发送新数据时，它都必须渲染每个组件，因此诸如触摸和搜索之类的事件需要大量时间来执行。
[更新] 事实证明，即使我删除套接字连接，我的应用也正在呈现某些内容， 请查看更新2

[问题：] 我应该怎么做才能提高App的性能？（诸如不使用状态或使用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。

[更新：2] 我发现我的应用程序内部 发生了无休止的渲染 ，这可能使我的线程处于繁忙状态（
我的意思是，这是无休止的并且不必要地传递了props
）。我在单独的上问了同样的问题，但是没有得到正确的答复，并且由于它与性能有关，因此我想在这里悬赏。

[答案更新：] 虽然这里有许多伟大的答案，以防万一有人想了解它是如何工作，你也许可以复制我的仓库，回到之前
这个承诺。我已将提交链接到解决我的问题的位置（因此您可能需要回去看看我做错了什么）。另外，所有答案都很有用，而且不难理解，因此您一定要仔细阅读。

阅读 218

2020-07-22

共1个答案

小编典典

就像Bhojendra
Rauniyar所说的那样，您应该在CoinCard中使用shouldComponentUpdate。您可能还想更改FlatList，缩小的样本在ScrollView中具有FlatList，这将导致FlatList完全展开，从而立即呈现其所有项目。

class cryptoTicker extends PureComponent {

      componentDidMount() {
        this.socket = openSocket('https://coincap.io');
        this.props.fetchCoin()
        this.props.CurrencyRate()

        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["short"] = tradeMsg["message"]["msg"]["short"]
                    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);

                }
            }
        })

      }

      componentWillReceiveProps(newProps){
        // Fill with redux data once
        if (this.updateCoinData.length < 1 && newProps.cryptoLoaded) {
            this.updateCoinData = [...newProps.cryptoLoaded];
        }
      }

    render() {

        return (
            <View style={{height: '100%'}}>
                <Header/>
                <FlatList
                    style={{flex:1}}
                    data={this.props.cryptoLoaded}
                    keyExtractor={item => item.short}
                    initialNumToRender={50}
                    windowSize={21}
                    removeClippedSubviews={true}
                    renderItem={({item, index}) => (
                        <CoinCard
                            index={index}
                            {...item}
                        />
                    )}
                />
            </View>
        )
    }
}

class CoinCard extends Component {

    shouldComponentUpdate(nextProps) {
        return this.props.price !== nextProps.price || this.props.perc !== nextProps.perc
    }

    render() {
        console.log("here: " + this.props.index);

        return (
            <View>
                <Text> {this.props.index} = {this.props.long} </Text>
            </View>
        )
    }
}

2020-07-22