Conceptos básicos de reacción

Método de recorrido de matriz, donde ele es el elemento del elemento de matriz, índice es el subíndice y return es el valor de retorno

El elemento describe lo que desea ver en el pantalla. Los elementos describen lo que quieres ver en la pantalla y son los ladrillos más pequeños que componen una aplicación React. A diferencia de los elementos DOM del navegador, que son objetos normales creados con una sobrecarga mínima, React DOM es responsable de actualizar el DOM para que sea coherente con el elemento React.

Descripción: 1. Parámetro 1: elemento es el elemento a mostrar. Puede ser en forma de etiqueta doble o etiqueta simple. Si es una etiqueta simple, debe tener un símbolo de cierre.

2. Parámetro 2: parentNode es la etiqueta para mostrar el elemento en el. página.

3. En un proyecto, generalmente solo hay un método de renderizado. Otras páginas se introducen a través de componentes o se accede a ellas a través de rutas.

4. Actualizar elementos renderizados: los elementos de React son objetos inmutables. Una vez creado, no puede cambiar sus elementos ni atributos secundarios. Un elemento es como un fotograma de una película: representa la interfaz de usuario en un momento específico. La única forma de actualizar la interfaz de usuario es crear un elemento completamente nuevo y pasarlo a ReactDOM.render()

Es conceptualmente similar a una función de JavaScript. Acepta argumentos arbitrarios (es decir, "accesorios") y devuelve elementos de React que describen el contenido que se muestra en la página. Los componentes le permiten dividir su interfaz de usuario en fragmentos de código reutilizables individuales y conceptualizar cada fragmento de forma independiente.

1. Formulario de función

2. Formulario de clase

Utilice la sintaxis de exportación del módulo es6 para exportar el componente.

Puede usar exportar el nombre del componente predeterminado, o puede usar exportar {nombre del componente}

La importación de componentes implementa la sintaxis de importación de los módulos es6. Puede utilizar el nombre del componente de importación desde la 'ruta del componente'

Nota:

1. La primera letra del nombre del componente debe estar en mayúscula

2. La página del componente La estructura solo puede tener una etiqueta de nivel superior y no puede tener una relación entre hermanos. Cuando la página es más compleja, el nombre del componente debe estar entre paréntesis.

Cuando la página es más compleja, el nombre del componente debe estar entre paréntesis. Arriba

Cuando un elemento React define un componente definido por el usuario, convierte los atributos recibidos a través de JSX en un único objeto pasado al componente. Este objeto se llama "props".

En el componente principal: pasado en forma de propiedades al llamar al componente secundario

En el componente secundario: recibido a través de accesorios

Ejemplo 1-5 accesorios pasados ​​del componente principal a los datos del componente secundario

1. Practique cómo crear componentes, exportarlos e importarlos

2. Practique pasar datos de los componentes principales a los secundarios a través de accesorios

2. En la función de ciclo de vida de reacción (7)

componenteWillMount: el componente está a punto de ser renderizado

componenteDidMount: se ha completado la representación del componente (el componente ingresa al estado de ejecución)

deberíaComponentUpdate: si se permite la actualización del componente (esta función debe tener un valor de retorno; si devuelve verdadero, se permite la actualización; si devuelve falso, no se permite la actualización)

componenteWillUpdate: El componente está a punto de comenzar a actualizarse

componenteDidUpdate: El componente se actualiza Completado (el componente vuelve a entrar en estado de ejecución)

componenteWillUpdate: El se completa la actualización del componente (el componente vuelve a entrar en estado de ejecución)

componenteWillReceiveProps: el componente recibe actualizaciones de accesorios

componenteWillUnMount: el componente está a punto de descargarse

El componente tiene tres funciones de ciclo de vida, que solo se activan una vez en un ciclo de vida:

componenteWillMount

componenteDidMount

componenteWillUnMount

3 Diagrama de flujo del ciclo de vida

1. En la función de ciclo de vida del componente de reacción, esto apunta al componente actual

2. En el componente definido por la clase de reacción. En un componente definido por la clase de reacción, este parámetro debe generarse en el método constructor llamando al método super() y apuntando al componente actual; de lo contrario, no habrá dicho parámetro y se informará un error al usarlo; parámetro.

3. En los componentes de reacción, de forma predeterminada, esto en la función personalizada apunta a indefinido

El estado interno del componente, que solo se puede usar dentro del componente

1. Los componentes funcionales no pueden usar el estado sin usar la nueva sintaxis HOOK

2. Se usa en componentes definidos por clases:

llamada this.state.property.name

p>

1. Nombre de función de ciclo de vida predeterminado

2. Estado de inicialización

3. Uso del estado en la página

1. Enlace la etiqueta Determinada, cómo usar los atributos

2. El evento se compone de "nombre del evento", usando nombres de casos de camello

3. La función del evento generalmente se define externamente , donde El evento se escribe así.

Los parámetros reales se calculan a partir del segundo parámetro de bind()

Agrega el parámetro e o event en el evento y colócalo al final de los parámetros formales.

Cuando ocurren múltiples modificaciones de estado en la misma función de evento, reaccionar no actualizará el estado inmediatamente, sino que los fusionará.

El siguiente código generará 222 y luego 111

Método 1:

Método 2:

1. Vincular el evento al elemento para apuntar al componente actual y cambiar el valor de estado

2. Defina un componente, introduzca el componente en app.js, pase el valor de estado de app.js al subcomponente y cambie el estado valor en el subcomponente Valor de estado

2.