Как обрабатывать поток Twitter с помощью React? - PullRequest
Новая
       17

Как обрабатывать поток Twitter с помощью React?

0 голосов
/ 04 февраля 2019

У меня есть этот компонент, его два уровня глубоко в 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+, и когда вы нажимаете на эту кнопку, она либо зависает, либо экран удаляется.весь список и т. д. Как можно улучшить производительность?

...