我在屏幕底部有一个门户，只是为了提供信息。它显示在redux状态，并且此组件处于App级别。问题是如果此门户组件更改了其状态，则会重新呈现整个父组件。在我的示例中，如果有人关闭了门户。下面是我如何在单击时关闭门户。

dispatch({
  type: 'close-portal',
  payload: {
    portalState: { display: false },
  },
});

应用程序组件

const isPortalOpen = useSelector((state) => state.user.portalState.display);
<Switch>
    <Route path='/login' component={LoginPage} exact />
    <Route path='/error' component={PermissionErrorPage} exact />
</Switch>
{isPortalOpen && <InformativeMessage />}

现在，如果我在Login页面上并关闭门户，则整个页面将重新呈现。
备选
我从App组件中删除了条件渲染，并将其移到了portal组件本身中。

应用程序组件

<Switch>
    <Route path='/login' component={LoginPage} exact />
    <Route path='/error' component={PermissionErrorPage} exact />
</Switch>
<InformativeMessage />

门户组件

return (
  <>
    {isPortalOpen ? (
      <EuiPortal>
        <EuiBottomBar
          style={{
            backgroundColor: showUnsavedWarningPortal ? "red" : "",
            padding: "20px",
          }}
        >
          <EuiFlexItem
            style={{
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
            }}
          >
            <EuiFlexItem>
              <EuiButtonIcon
                onClick={closePortal}
                color="ghost"
                iconType="crossInACircleFilled"
              />
            </EuiFlexItem>
            <EuiFlexItem style={{ marginLeft: "10px" }}>
              <EuiText>{message}</EuiText>
            </EuiFlexItem>
          </EuiFlexItem>
        </EuiBottomBar>
      </EuiPortal>
    ) : null}
  </>
);

怀疑
现在，如果门户关闭，但此组件没有完全删除，则返回null。如果打开开发工具并转到组件选项卡，我可以看到门户组件。当然，里面什么都没有，但在整个应用程序运行期间都使用此组件是否是一种好做法？