關聯數據和雙向綁定的react.js性能不佳

Question

為了使自己熟悉react.js，我編寫了一個類似Facebook的新聞流，其中包括用戶評論。 我嘗試使用戶名可更改，因此我在users對象和feed組件之間使用了雙向綁定。 但這並不是很有效，我也不知道這是一個反應性問題還是我有一個概念性問題。

問題案例：

這是JSFiddle上的一個簡單示例。 在頁面頂部，您可以更改用戶名並作出反應以更新所有名稱。

我從自己的API獲取數據，格式如下：

{
    "feeds": [
        {
            "_id": "feed_1",
            "user": "user_1",
            "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam",
            "comments": [
                {
                    "_id": "comment_1",
                    "user": "user_2",
                    "content": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
                },
                ...
            ]
        },
        ...
    ],
    "users": [
        {
            "_id": "user_1",
            "name": "Allan Moreno"
        },
        {
            "_id": "user_2",
            "name": "Edward Mendez"
        }
        ...
    ]
}

所以我有一個包含提要的數組和一個有用戶的數組。 我遍歷提要以生成反應提要組件。 提要和注釋通過我作為react屬性傳遞的getUserById函數獲取其用戶。

var StreamContainer = React.createClass({
    getUserById: function(userId) {
        for(var i=0; i<this.state.users.length; i++) {
            if(this.state.users[i]._id === userId) {
                return this.state.users[i];
            }
        }
    },

    getInitialState: function() {
        return {
            "feeds": [...],
            "users": [...]
        };
    },

    render: function() {
        var getUserById = this.getUserById;

        return (
            <div className="stream-container">
                <FeedList getUserById={getUserById} feeds={this.state.feeds} />
            </div>
        );
    }
});

var FeedList = React.createClass({
    render: function() {
        var getUserById = this.props.getUserById;

        var feedNodes = this.props.feeds.map(function(feed) {
            return [<Feed key={feed._id} feed={feed} getUserById={getUserById} />];
        });

        return (
            <div>
                <strong>Feeds:</strong>
                <ol className="stream-items">
                    {feedNodes}
                </ol>
            </div>
        );
    }
});

var Feed = React.createClass({
    render: function() {
        var getUserById = this.props.getUserById;

        return (
            <li className="stream-item">
                <strong>{getUserById(this.props.feed.user).name}:</strong> <em>{this.props.feed.text}</em>
                <FeedCommentList comments={this.props.feed.comments} getUserById={getUserById} />
            </li>
        );
    }
});

React.render(
    <StreamContainer />,
    document.getElementsByTagName('body')[0]
);

現在，我已經嘗試對某些性能測試進行一些交互。 我添加了所有用戶列表，以動態更改其名稱。 對於雙向綁定，我使用ReactLink 。

var StreamContainer = React.createClass({
    mixins: [React.addons.LinkedStateMixin],

    ...

    render: function() {
        ...

        var valueLink = this.linkState('users');
        var handleChange = function(e) {
            valueLink.requestChange(e.target.value);
        };

        return (
            <div className="stream-container">
                <UserList users={this.state.users} valueLink={valueLink} />
                <FeedList getUserById={getUserById} feeds={this.state.feeds} />
            </div>
        );
    }
});

var UserList = React.createClass({
    render: function() {
        var valueLink = this.props.valueLink;

        var users = this.props.users.map(function(user, index) {
            var thisValueLink = {};

            var handleChange = function(newValue) {
                valueLink.value[index].name = newValue;
                valueLink.requestChange(valueLink.value);
            };

            thisValueLink.requestChange = handleChange;
            thisValueLink.value = valueLink.value[index].name;

            return [<User key={user._id} user={user} valueLink={thisValueLink} />];
        });

        return (
            <div>
                <strong>Users:</strong>
                <ul>
                    {users}
                </ul>
            </div>
        );
    }
});

var User = React.createClass({
    render: function() {
        return (
            <li>                            
                <input type="text" valueLink={this.props.valueLink} /> {this.props.user.name} 
            </li>
        );
    }
});

但是現在我遇到了性能問題。 如果我更改用戶名，則必須檢查所有名稱以進行更新。 因此，如果我有100個提要，則可以看到輸入和更新之間的延遲。

是否有更好的方法將用戶傳遞給子組件？ 還是處理雙向綁定的更高效的方法？

Answer 1

您可以在StreamContainer渲染中創建一個用戶名字典對象，以傳遞給需要查找用戶名的子代：

var userNames = {};
this.state.users.forEach(function(user) {
    userNames[user._id] = user.name;
});

<FeedList usernames={userNames} feeds={this.state.feeds} />

那么這只是一個簡單的鍵查找，例如：

var Feed = React.createClass({
    render: function() {
        return (
            <li className="stream-item">
                <strong>{this.props.usernames[this.props.feed.user]}:</strong> <em>{this.props.feed.text}</em>
                <FeedCommentList comments={this.props.feed.comments} usernames={this.props.usernames} />
            </li>
        );
    }
});



var FeedCommentList = React.createClass({
    render: function() {
        var _this = this;
        var commentNodes = this.props.comments.map(function(comment) {
            return [
                <FeedComment 
                    key={comment._id} 
                    username={_this.props.usernames[comment.user]} 
                    comment={comment} />
            ];
        });

...

更新了jsfiddle