J'ai aidé un ami à refactoriser du code, et il l'a traité de conneries, mais il n'a rien fait

Prenez l'habitude d'écrire ensemble ! C'est le premier jour de ma participation au "Nuggets Daily New Plan · April Update Challenge", cliquez pour voir les détails de l'événement .

La première chose est ceci

Un de mes amis n'a pas développé de front-end depuis longtemps avec React, et certaines fonctions et pages simples ne sont pas un gros problème. Il n'y a pas longtemps React, 18 est sorti, et il a create-react-appcréé un nouveau projet avec lui pour pratiquer ses mains ensemble, mais celui qui a rencontré toutes sortes de problèmes, laissez-moi vous aider, il y a donc des choses à dire ensuite. Cela semble simple, mais bon Un petit problème pour les débutants.

reactJ'ai 18 ans, mais pourquoi ReactDom.render?

create-react-appLe projet nouvellement créé est toujours utilisé ReactDom.render, comme suit :

import React from 'react'
import ReactDOM from 'react-dom' //《----------react 17使用的ReactDOM
import App from './App'
import './index.css'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)
复制代码

Sémantique en général : ReactDOMutilisez la renderfonction pour JSX Elementsrestituer le composant idau nœudroot avec ' ' .dom

Utilisez ensuite react 18la nouvelle méthode d'écriture pour le transformer

react 18modifié

//index.tsx
import React from 'react'
import { createRoot } from 'react-dom/client' //《----------react 18使用的ReactDOM/client中的createRoot
import App from './App'
import './index.css'

function render() {
  const root = createRoot(document.getElementById('root')!)
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
}
复制代码

La sémantique est grosso modo : react-dom/clientutilisez la createRootfonction pour faire du nœud idest ' ' un moteur de rendu, puis utilisez la fonction pour le rendre.rootdomRenderJSX Elements

React est 18, et React-router a v6, mais il a beaucoup changé, comment l'utiliser ?

React-router v6On peut dire que le changement n'est pas négligeable, le v5routage précédent de l'organisation est le suivant :

React-routeur v5

//app.tsx
import React from 'react'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
export default () => {
  return (
      <Router>
        <Switch>
          <Route path="/" component={Login} />
          <Route path="/pageCenter" component={PageCenter} />
        </Switch>
      </Router>
    )
  }
)
复制代码

PageCenterC'est notre composant de page, qui est généralement implémenté ici 嵌套路由, tel que :

//PageCenter.tsx
import React from 'react'
import { Route, Switch } from "react-router-dom";
export default () => {
  return (
      <>
        <Switch>
          <Route path="/" component={Login} />
          <Route path="/pageCenter" component={PageCenter} />
        </Switch>
      <>
    )
  }
)
复制代码

em ~~~~, très similaire au routage de niveau supérieur implémenté dans app.tsx, dans la même ligne.

Évaluer comment une vague de routage v5 est organisée

• tsx 文件大臃肿：每配置一个路由，就写一个 Route 组件，我个人是不喜欢的，我不希望我的 tsx 的代码太多，这是我的喜好，为了阅读起来容易，清晰。
• 项目的文件夹结构复杂嵌套：顶层路由和嵌套子路由配置分离，直接影响了工程项目中对项目的文件夹结构的编排。因为不能够很直接理清页面组件间的组织关系，不理清会很混乱，维护难度加大，所以理清关系就落在了项目的文件夹结构设计了，这就会导致项目的文件夹结构随着v5 路由的组织方式的复杂而复杂。

React-router v6

可能是因为 v5 的种种原因，才导致 v6 的变化那么大，最突出便是：

• v6 痛快的推出了配置式路由：一个简单的配置对象，充分描述出了路由的样子和组织关系，痛快～～～。
• 简洁的路由嵌套方式：仅仅在配置了嵌套路由组件中，使用新推出的标签就搞定了，优雅～～～。

不过～～～，也有一些破坏性的改变，让我措手不及，比如：

• 路由拦截无了！！！：拦截啊可是，怎么没有了，这。。。
• withRouter无了！！！：函数组件我能用hook搞搞，类组件咋办，这。。。

em ～～～没事 repect，毕竟进步嘛，怎么会没代价呢，没有咱就自己搞被，不坐车就不会走了么？

我为此写了一个库r6helper，尽可能的弥补了升级 v6 带来的影响

• 拦截，安排上了。
• withRouter，安排上了。

路由好了，那么路由懒加载得有吧，怎么搞？

方式还是依然是通过 React.lazy配合import的动态引入，代码如下。

const Login = React.lazy(() => import('./login'))
复制代码

Ensuite, je dois React.Suspenseenvelopper ce composant de chargement paresseux, sinon il signalera une erreur.Mon ami à moi est bloqué depuis longtemps. . . , la raison en est que vous avez oublié d'envelopper un calque autour du composant paresseux React.Suspense.

<React.Suspense fallback={<>...</>}>{<Login />}</React.Suspense>
复制代码

Cependant, mon ami m'a dit que chaque fois que vous ajoutez une page, écrivez un lazycomposant d'importation et un Suspensepackage, puis lorsqu'il y aura plus de pages, le code deviendra comme ceci :

const Login = React.lazy(() => import('./pages/login'))
const Page1 = React.lazy(() => import('./pages/page1'))
const Page2 = React.lazy(() => import('./pages/page2'))
const Page3 = React.lazy(() => import('./pages/page3'))
const Page4 = React.lazy(() => import('./pages/page4'))
const Page5 = React.lazy(() => import('./pages/page5'))
...
export default () => {
  return useRoutes([
    {
      path: '/',
      element: <React.Suspense fallback={<>...</>}>{<Login />}</React.Suspense>
    },
    {
      path: '/page1',
      element:<React.Suspense fallback={<>...</>}>{<Page1 />}</React.Suspense>
    },
    {
      path: '/page2',
      element: <React.Suspense fallback={<>...</>}>{<Page2 />}</React.Suspense>
    },
    {
      path: '/page3',
      element: <React.Suspense fallback={<>...</>}>{<Page3 />}</React.Suspense>
    },
    {
      path: '/page4',
      element: <React.Suspense fallback={<>...</>}>{<Page4 />}</React.Suspense>
    },
    {
      path: '/page5',
      element: <React.Suspense fallback={<>...</>}>{<Page5 />}</React.Suspense>
    },
    {
      path: '/404',
      element: <div>not found</div>
    },
  ])
}
复制代码

Cela semble très redondant, il y a beaucoup de codes répétés, j'espère pouvoir l'aider à l'optimiser, em ~~~ Pas de problème, ouvrez le tout.

optimiser le code

Principalement sous deux aspects :

• lazyimportation de composants
• puis Suspenseenvelopper

Entrée unifiée

Tout d'abord, les composants de la page sont placés sous le pageschemin, puis dirigés vers l'importation, nous en ajoutons un indexsous le pagesdossier pour une gestion unifiée.

// 文件：pages/index.ts
export Login = React.lazy(() => import('./pages/login'))
export Page1 = React.lazy(() => import('./pages/page1'))
export Page2 = React.lazy(() => import('./pages/page2'))
export Page3 = React.lazy(() => import('./pages/page3'))
export Page4 = React.lazy(() => import('./pages/page4'))
export Page5 = React.lazy(() => import('./pages/page5'))
复制代码

Ensuite, nous refactorisons le code d'importation précédent :

const { Login, Page1, Page2, Page3, Page4, Page5 } from './pages'
复制代码

Encapsuler les composants d'emballage, prendre en charge plusieurs types

Écrivez un composant qui peut encapsuler plusieurs types, qui peuvent tous être encapsulés :

• Composants , y compris : composants de fonction et composants de classe .
• composants paresseux .
• élément jsx。

Ensuite le code est le suivant :

// 加载异步组件的loading
export const wrapper = (Child: any, cutonFallBack?: CutonFallBackT) => {
  // 判断jsx
  if (Child.type && !Child._init && !Child._payload) {
    return Child
  } else {
    // 判断是否为clas和function组件
    if (typeof Child === 'function') {
      return <Child></Child>
    } else {
      // 判断是否为lazy组件
      return (
        <React.Suspense fallback={cutonFallBack || <>...</>}>
          {<Child></Child>}
        </React.Suspense>
      )
    }
  }
}
复制代码

Ensuite, le code refactorisé global deviendra à peu près

const { Login, Page1, Page2, Page3, Page4, Page5 } from './pages'
...
export default () => {
  return useRoutes([
    {
      path: '/',
      element: wrapper(Login)
    },
    {
      path: '/page1',
      element: wrapper(Page1)
    },
    {
      path: '/page2',
      element: wrapper(Page2)
    },
    {
      path: '/page3',
      element: wrapper(Page3)
    },
    {
      path: '/page4',
      element: wrapper(Page4)
    },
    {
      path: '/page5',
      element: wrapper(Page5)
    },
    {
      path: '/404',
      element: wrapper(<div>not found</div>)
    },
  ])
}
复制代码

em ~~~ Simple et sans prétention, mais le code semble beaucoup plus confortable. Mes amis ont déploré que j'ai appris beaucoup de bonnes choses. Je pense que c'est l'opération de base, 233333.