为什么在使用 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只定义一次。 因此它不会不必要地重新渲染。