Cree un marco de interfaz de usuario de reaccionar+antd+mecanografiado+umi ganchos+mobx desde cero.

Debido a que la principal pila de tecnología de la empresa ahora es React, también quiero crear un buen marco de interfaz de usuario de React para facilitar su uso en el trabajo. El marco también se ha optimizado durante el proceso de empaquetado, como subprocesos múltiples, desempaquetado, almacenamiento en caché, etc., para mejorar la velocidad y la calidad del empaquetado. Las principales bibliotecas utilizadas incluyen:

Para crear una aplicación de reacción usando plantillas de TypeScript, se recomienda hilo. A continuación utilizaré principalmente hilo como ejemplo.

Luego cree un craco.config.js en el directorio raíz del proyecto para modificar la configuración predeterminada. Cargue y personalice temas a pedido

Solo un reempaquetado. Todos los temas se configuran aquí.

React-router se usa aquí para el enrutamiento, y los permisos también se procesan de acuerdo con la función del usuario; solo cuando la función es consistente con la función permitida por la ruta, se puede acceder y mostrar.

Cree un nuevo indext.tsx en el nuevo enrutador para representar la página.

Presentación de Router/index.tsx

Crear hasPermission.ts Si la función de la página contiene la función del usuario, devolverá verdadero Al representar menús y subpáginas, la página se representará. en base a este valor.

Por ejemplo, en la página de inicio, la lógica de representar subpáginas:

La página 1 debajo de la subpágina 1 no se puede mostrar ni acceder aquí. Si ingresa direcciones directamente, también se accederá a la página. Debido a que el rol permitido de la página1 es usuario y nuestro rol es administrador, no se puede mostrar.

UseImmer resuelve el problema de rendimiento de la asignación en ReactHooks y puede actualizar de forma independiente una propiedad de un objeto.

Los métodos de asignación anteriores también se pueden escribir juntos y el efecto es el mismo:

Haihook es una biblioteca de ganchos de React dedicada a proporcionar ganchos de alta calidad y de uso común. Hay muchos componentes de gancho, como usePersistFn usado anteriormente. Su función: en algunos escenarios, es posible que necesite usar useCallback para recordar una devolución de llamada, pero la función interna debe recrearse con frecuencia y el efecto de memoria no es muy bueno, lo que resulta en una representación repetida de subcomponentes. Para subcomponentes súper complejos, volver a renderizar puede afectar el rendimiento. Usando usePersistFn, puede garantizar que la dirección de la función nunca cambiará. Los anzuelos marinos siguen siendo muy potentes y tienen muchas API potentes. Puede ir a la documentación oficial para leer el complemento del paquete web de presión Terser-web pack-plugin.

Abre la bolsa al mismo tiempo.

DevServer, un proxy de nombres de dominio para entornos de desarrollo.

Para acelerar el empaquetado, también puede considerar eliminar antd-icons e ir al sitio web de iconfont por separado para presentarlo según sea necesario. De lo contrario, llevará mucho tiempo pagar la cuota de membresía.

Introducción a dotenv-cli

Agregue dos archivos de configuración del entorno de desarrollo: env.development y env.production

Luego modifique el script de inicio en package.json:

El inicio o la formación del hilo ahora se manejará según la configuración del entorno.

Aún quedan algunos detalles que deben ajustarse y haremos todo lo posible para que este marco sea más completo.

Dirección de Github:/benzic/react-typescript-umi hooks-mobx

Bienvenidas estrellas y deja comentarios.