為什么在使用 redux 時，這兩種情況下的反應渲染不同？

Question

我正在努力解決我認為是錯誤的事情。 如果有人能解釋為什么會發生這種情況，我將不勝感激。

在一種情況下，每次在商店中更新權限時都會呈現權限組件。 而在第二種情況下，權限組件只呈現一次。

這是我的組件樹：-

• 布局
  • 側邊欄
  • 成分
    • 認證
      • 權限
      • 角色

權限組件

import * as React from "react";
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { RouteComponentProps } from "react-router-dom";
import { fetchPermissions, launchModal } from "../store/dispatcher";
import { Permission } from "../store/types/auth";
import { GlobalState } from "../store/types/state";

import Loading from "../common/loading";

interface Props extends RouteComponentProps {}

const Permissions: React.FC<Props> = React.memo((props) => {

    const { loading, permissions } = useSelector((state: GlobalState) => ({
        loading: state.admin.permissionState?.isLoading,
        permissions: state.admin.permissionState?.permissions
    }));

    useEffect(() => {
        fetchPermissions();
    }, []);

    return (
        <div className='card'>
            <div className='card-header'>
                <div className='row'>
                    <div className='col-md-8'>
                        <h3>User Permissions</h3>
                    </div>
                </div>
            </div>
            <div className='card-body'>

            </div>
        </div>
    )

});

export default Permissions;

情況1：-

在這種情況下，每次更新存儲的權限時，權限組件都會重新呈現。

import * as React from "react";
import {Route, RouteComponentProps, Switch} from "react-router-dom";
import Loadable from "react-loadable";

import Loader from "../common/Loader";

interface Props extends RouteComponentProps {}

const Auth: React.FC<Props> = React.memo((props) => {

    const Permissions = Loadable({
        loader: () => import('./permissions'),
        loading: Loader
    });

    const Roles = Loadable({
        loader: () => import('./roles'),
        loading: Loader
    });

    return (
        <div>
            <Switch>
                <Route path={`${props.match.url}/permissions`} render={(props) => <Permissions {...props} />} />
                <Route path={`${props.match.url}/roles`} render={(props) => <Roles {...props} />} />
            </Switch>
        </div>
    )

});

export default Auth;

案例二

這按預期工作，權限組件僅呈現那些。

import * as React from "react";
import {Route, RouteComponentProps, Switch} from "react-router-dom";
import Loadable from "react-loadable";

import Loader from "../common/Loader";

interface Props extends RouteComponentProps {}

const Permissions = Loadable({
    loader: () => import('./permissions'),
    loading: Loader
});

const Roles = Loadable({
    loader: () => import('./roles'),
    loading: Loader
});

const Auth: React.FC<Props> = React.memo((props) => {

    return (
        <div>
            <Switch>
                <Route path={`${props.match.url}/permissions`} render={(props) => <Permissions {...props} />} />
                <Route path={`${props.match.url}/roles`} render={(props) => <Roles {...props} />} />
            </Switch>
        </div>
    )

});

export default Auth;

Answer 1

看看這里： 無狀態組件中的函數？

情況1

每次重新渲染Auth時，都會重新定義Permissions 。 因此，它也會再次渲染。

案例二

Permissions只定義一次。 因此它不會不必要地重新渲染。