为什么在使用 redux 时，这两种情况下的 react 渲染会不同？答案

【问题标题】：Why does react render differently in these two cases when using redux?为什么在使用 redux 时，这两种情况下的 react 渲染会不同？
【发布时间】：2020-12-11 13:14:58
【问题描述】：

我一直在努力解决我认为是错误的事情。如果有人能解释为什么会发生这种情况，我将不胜感激。

在一种情况下，权限组件会在每次在商店中更新权限时呈现。而在第二种情况下，权限组件只呈现一次。

这是我的组件树：-

布局
- 侧边栏
- 组件
  - 认证
    - 权限
    - 角色

权限组件

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;

案例 2

这按预期工作，权限组件只呈现那些。

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;

【问题讨论】：

标签： javascript reactjs typescript redux rendering

【解决方案1】：

看看这里：Functions in stateless components?

案例一

每次Auth 重新渲染时，Permissions 都会重新定义。因此，它也会再次渲染。

案例2

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

【讨论】：