时间戳

首页 > 解决方案 > 每次当我的 redux 状态更新时，我的整个页面都在加载。不完全从服务器加载资源，但

reactjs - 每次当我的 redux 状态更新时，我的整个页面都在加载。不完全从服务器加载资源，但

问题描述

每次当我的 redux 状态更新时，我的整个页面都在加载。不完全从服务器加载资源，而是刷新页面内的组件？

以下是我的店铺代码。PS：我正在使用多个商店并使用组合减速器将它们组合起来。

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
import { User } from "./User";
import { Restaraunt } from "./Restaraunt";
import { Dish } from "./Dishes";
import { Cart } from "./Cart";
import { createForms } from "react-redux-form";
import { InitialFeedback, RegisterUserDetails, RegisterRestarauntDetails, addDishDetails } from "./forms";


export const storeConfig = () => {
    const store = createStore(
        combineReducers({
            user: User,
            restaraunts: Restaraunt,
            dishes: Dish,
            cart: Cart,
            ...createForms({ feedback: InitialFeedback }),
            ...createForms({ registeruser: RegisterUserDetails }),
            ...createForms({ registerres: RegisterRestarauntDetails }),
            ...createForms({ addDish: addDishDetails })
        }),
        applyMiddleware(thunk, logger)
    );
    return store;
};

我所以我正在使用我提到的特定页面的购物车。因此，每当我的购物车更新时，我的整个页面都会再次加载。

标签： reactjsreduxreact-redux

解决方案

老实说，这有点太宽泛了。

您应该查看 React 应用程序中的每个组件，并确保它们仅在需要时重新渲染。你可以做的事情：

  1. shouldComponentUpdate如果您有基于类的组件并且仅在少数道具更改时才应该更新，则可以使用生命周期。
  2. 您可以使用它React.memo来记忆组件并防止不必要的重新渲染。
  3. useCallback挂钩功能以记住它们。

推荐阅读