Question

假设我正在编写Twitter克隆但更简单。推文看起来像这样：

图片中带有Like按钮。每条推文都有这样的状态：

{
    tweetId: '123456789',
    message: 'Stack Overflow',
    date: 125878315832,
    user: {
        uid: '431827512',
        username: 'some_user_name',
        displayName: 'some_display_name',
        profilePictureUrl: 'https://some-url.com'
    },
    liked: false
}

liked表示观众是否喜欢此推文。如果liked为false，则Like按钮将保持未着色，如果为真，则该按钮将变为红色。我将redux store中的所有推文存储在如下结构中：

{
    [tweetId]: {
        message: 'Stack Overflow',
        date: 125878315832,
        user: {
            uid: '431827512',
            username: 'some_user_name',
            displayName: 'some_display_name',
            profilePictureUrl: 'https://some-url.com'
        },
        liked: false
    },
    [tweetId]: {
        ...
        ...
    },
    ...
    ...
}

这是我的reducer tweet_reducer.js以及我如何处理LIKE_TWEET操作，LIKE_TWEET操作返回被推荐的推文tweetId ：

export default function (state = { tweets: {} }, action) {
    switch (action.type) {
        ...    // Other cases
        case LIKE_TWEET:
            const tweetId = action.payload;
            const tweet = state.tweets[tweetId];
            return {
                tweets: {
                    ...state.tweets,
                    [tweetId]: {
                        ...tweet,
                        liked: true
                    }
                }
            };
    }
}

这样，我更新了商店中特定推文的liked字段。在我的组件中，我有componentWillReceiveProps处理接收更新的推文。因此，现在，该特定推文的Like按钮应为红色。这一切都按预期发生，除了当like包含超过50条推文时store按钮变为红色需要大约1秒钟。我怎样才能让它更快？顺便说一句，每条推文都是PureComponent而不是Component

Answer 1

在您的代码中添加一些简单的带时间戳的日志记录，以了解时间的进展情况 - 当您进入/退出每个Reducer时，何时发布您的操作，以及何时通知组件appState更改，以及当您更改按钮的颜色时。这将告诉您哪些呼叫快速（按预期），哪些不是。然后你会知道在哪里寻找你错过的第二个......

Redux性能问题在本地反应

1 个答案: