Reactjs 我可以用这种方式使用react-HOC，而不会出现将来的陷阱吗

我学习了ReactJs，有一个关于ReactJs高阶组件（HOC）的设计组合问题

在App.jsx下面的代码中，我将此

与身份验证一起使用，以初始化应用程序核心进程。App.js中未使用此HOC
值。因此，我必须使用身份验证抑制所有
HOC render callbak，并通过返回
false
在
shouldComponentUpdate
中进行此操作

（我在许多其他地方使用这个HOC来获取HOC的值，但在App.jsx中没有）

文件App.jsx:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'recompose';
import { getAlbumData } from './redux/albumData/albumData.actions';
import { getMetaData } from './redux/albumMetaData/albumMetaData.actions';

import Header from './components/structure/Header';
import Content from './components/structure/Content';
import Footer from './components/structure/Footer';
import { withAuthentication } from './session';
import './styles/index.css';

class App extends Component {
    componentDidMount() {
        const { getMeta, getAlbum } = this.props;
        getMeta();
        getAlbum();
    }

    shouldComponentUpdate() {
        // suppress render for now boilerplate, since withAuthentication
        // wrapper is only used for initialization. App don't need the value
        return false;
    }

    render() {
        return (
            <div>
                <Header />
                <Content />
                <Footer />
            </div>
        );
    }
}
const mapDispatchToProps = dispatch => ({
    getMeta: () => dispatch(getMetaData()),
    getAlbum: () => dispatch(getAlbumData()),
});

export default compose(connect(null, mapDispatchToProps), withAuthentication)(App);

我的问题是这会不会给我带来问题，或者这样做可以吗

我知道HOC不应该这样使用。带有身份验证的
负责对Firebase进行身份验证，然后在所有用户对象上呈现本地和Firestore listener
快照中的更改

这个HOC在许多其他地方都可以正确使用，但是App.jsx只需要初始化HOC，而不需要使用它的服务

我的问题是这会不会给我带来问题，或者这样做可以吗

   import React from 'react';
    import { connect } from 'react-redux';
    import { compose } from 'recompose';
    import AuthUserContext from './context';
    import { withFirebase } from '../firebase';
    import * as ROLES from '../constants/roles';
    import { setCurrentUser, startUserListener } from '../redux/userData/user.actions';
    import { selectUserSlice } from '../redux/userData/user.selectors';
    
    const WithAuthentication = Component => {
        class withAuthentication extends React.Component {
            constructor() {
                super();
                this.state = {
                    authUser: JSON.parse(localStorage.getItem('authUser')),
                };
            }
    
            componentDidMount() {
                const { firebase, setUser, startUserListen } = this.props;
                this.authListener = firebase.onAuthUserListener(
                    authUser => {
                        this.setState({ authUser });
                        setUser(authUser);
                        startUserListen();
                    },
                    () => {
                        localStorage.removeItem('authUser');
                        this.setState({ authUser: null });
                        const roles = [];
                        roles.push(ROLES.ANON);
                        firebase
                            .doSignInAnonymously()
                            .then(authUser => {
                                if (process.env.NODE_ENV !== 'production')
                                    console.log(`Sucessfully signed in to Firebase Anonymously with UID: ${firebase.getCurrentUserUid()}`);
                                firebase.doLogEvent('login', { method: 'Anonymous' });
                                firebase
                                    .userDoc(authUser.user.uid)
                                    .set({
                                        displayName: `User-${authUser.user.uid.substring(0, 6)}`,
                                        roles,
                                        date: firebase.fieldValue.serverTimestamp(),
                                    })
                                    .then(() => {
                                        console.log('New user saved to Firestore!');
                                    })
                                    .catch(error => {
                                        console.log(`Could not save user to Firestore! ${error.code}`);
                                    });
                            })
                            .catch(error => {
                                console.error(`Failed to sign in to Firebase: ${error.code} - ${error.message}`);
                            });
                    },
                );
            }
    
            componentWillUnmount() {
                this.authListener();
            }
    
            render() {
                const { currentUser } = this.props;
                let { authUser } = this.state;
                // ALl changes to user object will trigger an update
                if (currentUser) authUser = currentUser;
                return (
                    <AuthUserContext.Provider value={authUser}>
                        <Component {...this.props} />
                    </AuthUserContext.Provider>
                );
            }
        }
    
        withAuthentication.whyDidYouRender = true;
    
        const mapDispatchToProps = dispatch => ({
            setUser: authUser => dispatch(setCurrentUser(authUser)),
            startUserListen: () => dispatch(startUserListener()),
        });
    
        const mapStateToProps = state => {
            return {
                currentUser: selectUserSlice(state),
            };
        };
    
        return compose(connect(mapStateToProps, mapDispatchToProps), withFirebase)(withAuthentication);
    };
    
    export default WithAuthentication;