Big React App - 如何改进我的应用程序结构

Question

你能帮我看看如何改进我的结构吗，因为它变得非常大

请阅读我的代码

我现在的结构是这样的

这是我的父组件(App.js)最大的组件

import React, { PureComponent } from 'react';
import { Route, withRouter } from 'react-router-dom';
import Home from "./public/home";
import Dashboard from "./private/dashbaord";
...(around 66 component/packages imports)

class App extends PureComponent {
        constructor(props){
        super(props);
        this.state = {
            pathname: '/public',
            ...(around 15 states)
        };
    }

     componentDidMount() {
       this.checkAccepedCookies();
       this.isLogged();
       this.check404();
       this.insertGTM(); 
       this.insertTrustPiloit();
       this.checkDarkMode();
     }

     updateData(); //The updateData function used to update the pathname state so I can know if it's public or private
     connectWebSocket();
     signout();
     ...(around 21 functions)

    render(){
        return(
            <div>
                {this.state.isPolicy && <PolicyModal isPolicy={this.state.isPolicy} openPolicy={(boolean)=>this.setState({isPolicy: boolean})} />}
                {this.state.isOpenTrack && <TrackOrderModal isOpenTrack={this.state.isOpenTrack} ...(passing 3 props functions) />}
                {this.state.openUsers && <LoginModal ...(passing 3 props functions) />}
                {this.state.isOpenContact && <ContactSupportModal isOpenContact={this.state.isOpenContact} onClose={this.} />}
                {this.state.pathname === '/public' && <NavHome />}
                {!this.state.isCookiesAccepted && <CookiesModal openPolicy={()=>this.setState({isPolicy: true})} accept={()=>this.setState({isCookiesAccepted: true})} />}
               
                 //Buyers Routers
                    <Route path='/buy/' render={()=><BuyersBuy  updateData={this.updateData} />} /> 
                    <Route path='/refund/' render={()=><BuyersRefund  updateData={this.updateData} />} />
                    <Route path='/download/' render={()=><BuyersDownload updateData={this.updateData} />} />
                    ...(Around 18 Routes for Buyers)
                
                    //Then I have the sellers routers it's around 5 routers wrapped in a div like so

                //Sellers Routers
                 <div id='dashboard'>
                    {this.state.pathname === '/private' && <TopNavBarSellers />}
                    {this.state.pathname === '/private' && <LeftNavBarSellers />}
                    <Route path='/dashbaord/' render={()=><SellersDash updateData={this.updateData} />} /> 
                    (4 routers more)
                </div>

                //Users Routers (I haven't implemented the users section yet because I'm confused 
                // because the users section will be around 5 routers with 5 function extra I'm feeling I'm harming the app performance and this not a correct structure.)

            {this.state.pathname === '/public' && <FooterBuyers />}
            </div>
        )
    }
}

这个App.js是我有的最大的文件，另一个我有一个很小的文件

请指导我正确的结构，可能有买家路由器 - 卖家路由器 - 用户路由器

Answer 1

我对较小文件的方法是一些嵌套路由。
例如：将所有买家路线归为一个组成部分。

class App extends PureComponent {
  ...
  render() {
    return(
      <div>
        ...
        <Route path='/buyers/' component={BuyersRoot} />
        ...
      </div>
    )
  }
}

...

const BuyersRoot = (props) => {
  const { path }  = useRouteMatch();
  return (
    <Switch>
      <Route path={path +'buy'} render={()=><BuyersBuy  updateData={this.updateData} />} /> 
      <Route path={path +'refund'} render={()=><BuyersRefund  updateData={this.updateData} />} />
      <Route path={path +'download'} render={()=><BuyersDownload updateData={this.updateData} />} />
      ...(Around 18 Routes for Buyers)
  </Switch>
  )
}

编辑 1：

您可以排除 RouteRoots 来分隔文件。
将 App Component 中的逻辑拆分为单独的文件
使用一些 state management 来减少组件文件中的逻辑量。
构建仅包含逻辑内容的服务文件。
将条件显示逻辑排除在渲染中子组件并让每个组件决定它是否应该渲染与否
将 /private 和 /public 路由拆分到 RoutingComponents 中，您可以在其中处理身份验证等。
构建 higher-order-components 以将状态或上下文继承给子项。

所以基本上：从逻辑上将所有内容分开以缩小您的组件。但是，请将所有内容放在一起。请确保您不会将您的应用程序拉得太远，以免没有人理解什么属于一起。有时这是一条非常好的线。

Big React App - 如何改进我的应用程序结构

Big React App - How to improve my app structure

structure

reactjs

react-router-dom