Reactlt;umi notas pequeñasgt;

Este artículo presenta principalmente a un principiante de React, que usa umi para construir un proyecto de React desde cero y registra el uso de umi y puntos de conocimiento relevantes sobre reaccionar ~

?Actualización continua. ..?

Solución: utilice enlaces para presentar, favicon es adecuado para introducir iconos correspondientes a enlaces

Descripción general del gancho, se recomienda leer el documento detenidamente

Ejemplo:

Este es un caso modelo simple que escribí para cambiar de nombre de usuario

He marcado los lugares que necesitan atención en rojo, especialmente { }. aceptado de forma predeterminada. A props, mencionado en la transferencia de parámetros en la página de enrutamiento

Enrutamiento convencional, si sigue la estructura de directorio recomendada oficialmente, no necesita configurar la tabla de enrutamiento, se generará automáticamente.

Hay dos formas de escribir aquí, una es colocarla en la tabla de enrutamiento de rutas y la otra es escribirla directamente en la página especificada, según las necesidades personales.

Método de escritura 1: contenedores

Método de escritura 2: ¿Enrutamiento de permisos?

¿Varias formas de comunicación entre componentes en React

Sub? -use Parent: vincula datos al componente secundario, y el componente secundario los recibe a través de accesorios;

Parent usa child: lo define mediante useRef(), y vincula la referencia en el componente secundario, y .current obtiene. el DOM;

p>

El niño cambia al padre: al vincular los datos de un método asociados con el componente principal en el componente secundario.

El padre cambia al hijo: define a través de useRef( ) y vincula la referencia en el componente secundario, . current llama al método de definición del subcomponente para modificar el valor

Mensaje de error:

**Advertencia: **devScripts.js: 6523 Advertencia: No se pueden proporcionar referencias a los componentes de la función. Los intentos de acceder a esta referencia fallarán. ¿Quiso usar React.forwardRef()?

Si usa referencia en un componente encapsulado, encontrará este error. Esta es una llamada funcional y requiere useRef. El uso de forwardRef también se puede combinar con useImperativeHandlede para exponer los valores o métodos del componente secundario al componente principal.

? ¿UseRef() y useImperativeHandle() de los valores de los componentes funcionales de React

? ¿UseImperativeHandle de la serie React Hooks

método de escritura de escape HTML en React

instrucciones de configuración de umi-request

Modificación del número de puerto local

Cómo obtener los datos correspondientes del backend

src/utils/request .js

Uso

Explicación del documento oficial

Solución

Uso de State Hook

Pueden ocurrir las siguientes expectativas en algunos casos A veces no es lo que desea

Por ejemplo: deslice para cargar más listas en el terminal móvil, actualice la lista de acuerdo con las condiciones de búsqueda, cada vez que las condiciones cambien, debe configurar el list = [] nuevamente, y luego consígalo. Si crea una nueva lista, encontrará el problema de que la lista no se puede actualizar y borrar a tiempo

Solución:

configuración de OutputPath

outputPath: dist/shunfeng. Después del empaquetado, se generarán otros archivos bajo el archivo shunfeng bajo el archivo dist.

Para usar sass en umi, solo necesita instalar @umijs/ plugin-sass

No se requiere configuración después de la instalación, umi lo reconocerá por sí solo.

Dart sass se usa de forma predeterminada. Si necesita usar node-sass, debe configurarlo como el sitio web oficial

Diferencia: el primer parámetro pasado es diferente

React. createElement()

Acepta tres parámetros, el primer parámetro puede ser un nombre de etiqueta. Como componente div, span o React. El segundo parámetro es el atributo pasado. El tercer parámetro y los siguientes son todos subcomponentes del componente.

React.cloneElement()

React.cloneElement() es similar a React.createElement(), excepto que el primer parámetro que pasa es un elemento de React en lugar de un nombre de etiqueta o componente. Los atributos recién agregados se fusionarán con los atributos originales y se pasarán al nuevo elemento devuelto, y los elementos secundarios antiguos serán reemplazados. Se conservarán las claves y referencias de los elementos originales.

Configurar la importación dinámica