ReactJS呈现列表的时间每增加一个新元素就增加一次

Question

我正试图用react JS呈现一个项目列表。由于我的列表项相对复杂，我创建了一个简单的小提琴来陈述我的问题。

我如何修复新添加项目的渲染时间？或者只是react js的工作方式。

这里是我的主要反应组分简化。

React.createClass({
    shouldComponentUpdate: function (nextProps, nextState) {
        return nextState.posts.length !== this.state.posts.length;
    },
    getInitialState: function () {
        return {
            posts: []
        };
    },
    // getStream is bound to a scroll event handler. Simply, this function is called when user gets close to the end of page.
    getStream: function () {
        var self = this;
        ... ajax call success: (jsonResult) ...
        self.setState({
            posts: React.addons.update(self.state.posts, { $push: jsonResult })
        });
        ... end ....
    },
    render: function () {
        var self = this;

        var postNode = this.state.posts.map(function (post, i) {
            if (post.isActivity) {
                return (<ReactActivity key={i}></ReactActivity>);
            }
            else {
                return (<ReactStreamPost key={i}></ReactStreamPost>);
            }
        });

        return (<div>
            {postNode}
        </div>);
    }
    });

并且ReactStreamPost和ReactStreamActivity在这一点上可以是无状态组件。像

var ReactStreamPost = React.createClass({
    shouldComponentUpdate: function () {
        return false;
    },
    render: function () {
        return (
            <div className="stream-post">
                <div className="post-topbar">
                    <a href="#" className="display-name">Test USER</a>
                </div>

                <div className="post-inner-wrapper">
                    <div className="post-owner-big">
                        <div className="post-owner">
                            <img className="profile-img" />
                        </div>
                    </div>
                    <div className="post-content">
                        <div className="post-header">
                            <div className="post-owner">
                                <img className="profile-img" />
                            </div>
                            <div className="post-agt">
                                <ReactAutoGenerateTitle></ReactAutoGenerateTitle>
                            </div>
                        </div>
                        <div className="post-title">
                            <div>
                                <a href="#" className="display-name">Test USER</a><span> Post title</span>
                            </div>
                        </div>
                        <div className="attachments">
                            attachments
                        </div>

                        <div className="post-actions">
                            <div className="left-actions">
                                <a href="#">
                                    <i className="icon icon-add-info"></i><span>Add info</span>
                                </a>
                            </div>
                            <div className="right-actions">
                                <a href="#" className="toggler">
                                    <i className="icon"></i>
                                    <span>x</span>
                                </a>
                                <a href="#" className="toggler">
                                    <i className="icon"></i>
                                    <span>x</span>
                                </a>
                                <a href="#" className="share icon icon-share"></a>
                            </div>
                        </div>

                        <div className="post-comments">
                            <div className="comment-block">
                                <div className="commentor">
                                    <img />
                                </div>
                                <div className="comment">
                                    <a href="#">Test USER</a><span>: </span><span>Comment test</span>
                                </div>
                                <div className="comment-date">
                                    <span>comment date</span>
                                </div>
                            </div>

                            <div className="comment-form">
                                <div className="commentor">
                                    <img />
                                </div>
                                <div className="text-area">
                                    <textarea rows="1" className="small"></textarea>
                                </div>
                                <div className="submit-comment">
                                    <a href="#" className="icon icon-send"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="post-date">
                    <span>post date</span>
                </div>
            </div>
        );
    }
});

Answer 1

这是因为每次添加更多元素时，都会重新呈现整个列表，其中还包括以前已经呈现的列表项。

修复的一种方法是将列表项放在它自己的组件中，并使用shouldComponentUpdate来不重新呈现它。这仍然会增加时间，因为它仍然需要检查是否需要重新渲染，但inxcrease不会那么陡峭。在这里工作的小提琴。行组件如下所示：-

  var Row = React.createClass({
  shouldComponentUpdate: function() {
    return false;
  },

  render: function() {
    return ( < li > < span > some < /span><span>more</span > < span > elements < /span></li > )
  }
})