[英]Why does react render differently in these two cases when using redux?
I was struggling with something I thought was a bug.我正在努力解决我认为是错误的事情。 I would be grateful if someone could explain why this happens.
如果有人能解释为什么会发生这种情况,我将不胜感激。
In one instance, the permissions component renders every time permissions are updated in the store.在一种情况下,每次在商店中更新权限时都会呈现权限组件。 While in the second instance, the permissions component renders only once.
而在第二种情况下,权限组件只呈现一次。
This is my component tree:-这是我的组件树:-
Permissions Component权限组件
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;
Case 1:-情况1:-
In this case, every time permissions are updated to the store, the permissions component rerenders.在这种情况下,每次更新存储的权限时,权限组件都会重新呈现。
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;
Case 2案例二
This works as expected, the permissions component renders only ones.这按预期工作,权限组件仅呈现那些。
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;
Have a look here: Functions in stateless components?看看这里: 无状态组件中的函数?
Every time Auth
gets re-rendered, Permissions
gets re-defined.每次重新渲染
Auth
时,都会重新定义Permissions
。 Thus, it will render again, too.因此,它也会再次渲染。
Permissions
gets only defined once. Permissions
只定义一次。 Thus it will not re-render unnecessarily.因此它不会不必要地重新渲染。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.