Question

我有这个组件，它在React DOM中有两个层次，父级A->父级B->此组件：

import React, { Component } from 'react';
import PropTypes from "prop-types";

import TweetCard from './TweetCard'
import "./styles/ListAdapterStyles.css"


class ListAdapter extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data_count: 0,
            toggleFlag: false,
            tweets: [],
            temp_tweets: []
        }
    }
    /**
     * A life cycle method called after the component is mounted. We will set 
     * some of our states here with props.
     */
    componentDidMount(){
        let {data_count, temp_tweets, tweets } = this.state
        data_count = this.props.data.length
        temp_tweets = tweets = this.props.data
        this.setState({data_count, tweets, temp_tweets})
    }
    /**
     * Another life cycle method which allows us to check and update our state based on previous props
     * data with the incoming props data.
     */
    componentDidUpdate(prevProps) {
        let { data_count } = this.state
        if (prevProps.data !== this.props.data) {

            this.setState({
                data_count: data_count === 1 ? (this.props.data.length - this.state.tweets.length) + 1: 
                (this.props.data.length - this.state.tweets.length),
                temp_tweets: this.props.data
            })
        }
    }
    /**
     * This is custom method to handle button click evet.
     */
    handleButtonClick = () => {
        let { temp_tweets } = this.state
        this.setState({ data_count: 0, 
                        toggleFlag: true, 
                        tweets: temp_tweets,
                        temp_tweets: []
                    })
    }
    /**
     * This is typical React render function
     */
    render() {
        let { data_count, tweets, toggleFlag } = this.state
        let singular_or_plural = data_count > 1 ? "tweets" : "tweet"
        return (
            <>
                <span className="TweetNumberSpan">
                    {
                        data_count > 0 ? (
                            <button className="TweetNumber" onClick={this.handleButtonClick}>
                                You have {data_count} {singular_or_plural}.
                            </button>
                        ) : ''
                    }
                    {toggleFlag &&
                        tweets.map((tweet, i) =>
                            <TweetCard key={i} tweet={tweet} />
                        )
                    }

                </span>
            </>
        )
    }
}

ListAdapter.propTypes = {
    data: PropTypes.array.isRequired,
};

export default ListAdapter

所有数据都来自父A组件，该组件中有一个websocket客户端，并传递道具。单击时有一个按钮，其中显示了更多新的推文，非常类似于Twitter，you have 20 new tweet等。问题在于，当推文的数量达到200+时，当您单击该按钮时，它会冻结或冻结。屏幕将删除所有列表等。改善性能的方法是什么？

如何使用React处理Twitter流？

0 个答案: