Tabla de contenido
2. Coloque el componente en un archivo js separado
Cuarto, el árbitro obtiene dom
9. Accesorios de atributo (solo lectura)
10. Ciclo de vida (función de gancho)
1、componentWillReceiveProps(nextProps)
2, debería actualizar el componente (nextProps, nextState)
4. el renderizado es el mismo que el renderizado en la inicialización
5, componenteDidUpdate(preProps,preState,value)
1, el componente se desmontará
Reaccionar componentes
Introducción de componentes: concepto de creación de componentes, que representa una determinada parte y función en la página, independiente y reutilizable
1. Dos métodos de creación
componente de función
1. Componentes creados usando funciones JS
2. El nombre de la función debe comenzar con mayúscula
3. El componente debe tener un valor de retorno
Por ejemplo:
function Hello() {
return (
<div>333333</div>
)
}
ReactDOM.render(<Hello/>,document.getElementById("root"))componente de clase
1. Los nombres de las clases comienzan con mayúscula
2. Los componentes de clase deben heredar la clase principal React.Component
3. El componente de clase debe proporcionar el método render()
4. render() debe tener un valor de retorno
Por ejemplo:
class Ok extends React.Component {
render() {
return (
<div>ok</div>
)
}
}
ReactDOM.render(<OK/>, document.getElementById("root"))2. Coloque el componente en un archivo js separado
paso:
1. Cree un archivo js de componente, por ejemplo: Book.js;
2. Importe React en el archivo Book.js;
3. Clases de utilidad o funciones para crear componentes;
4. Los componentes deben exportarse antes de que puedan utilizarse;
5. Importe Book.js en el archivo especificado;
6. Componentes de renderizado.
Por ejemplo:
Libro.js
// Book.js
import React from 'react'
class Book extends React.Component {
render() {
return(
<h1>读书明智</h1>
)
}
}
// 导出
export default Bookíndice.js
import Book from './Book'
ReactDOM.render(<Book/>,document.getElementById("root"))3. El estilo del componente
1. Estilos en línea
2. Importación externa
(1) Prepare el archivo CSS externo e impórtelo en js
Nota : se recomienda escribir el atributo de clase como className
Cuarto, el árbitro obtiene dom
<p ref='myword'>你好</p>La etiqueta p se puede obtener a través de this.refs.myword
Nota: las referencias quedarán en desuso y se informará un error en modo estricto
Nueva forma de escribir:
myRef = React.createRef();
<div ref={this.myRef}></div>Si la referencia está vinculada a un componente, obtenemos ese componente.
5. Representación de listas
6. Representación condicional
1、{ 条件 ？<p>sí</p> : <p>no</p> }
2、{ esperar && <p>ok</p> }
7. Manejo de eventos
1. Vinculación de eventos
on+event name={fn} Nota: utilice mayúsculas y minúsculas aquí
Por ejemplo:
<button onClick={this.myclick}>1</button>
<button onClick={()=>{
console.log(this);
}}>1</button>Ocho, estado del estado
Los componentes que establecen el estado se denominan componentes con estado y los componentes que no establecen el estado se denominan componentes sin estado.
datos en el componente
Por ejemplo:
1,
class A extends Component {
state = {key:value}
}2,
class A extends Component {
constructor() {
super();
this.state = {
key: value
}
}
}Aviso:
(1) Defina estado en la clase (solo puede escribir este nombre) objeto --------estado = {clave:valor};
(2) No modifique el estado directamente: this.state.ok='ok' -------- use setState({key:value})
(3) establecer nota de estado:
En la lógica síncrona, el estado y el dominio real se actualizan de forma asíncrona;
En lógica asíncrona, actualice el estado y el dominio real de forma síncrona;
Acepta el segundo parámetro, que es una función de devolución de llamada, donde se actualizan el estado y el dominio.
9. Accesorios de atributo (solo lectura)
El estado es un atributo interno, y los accesorios son para recibir datos del exterior para una mejor reutilización.
1. Un componente:
{/*属性*/}
<MyNav title={this.title} leftBtn={isShowLeft}/>2, MyNav.js:
render() {
let {title,leftBtn} = this.props;
return (
<div>
{leftBtn && <button>left</button>}
<p>{title}</p>
</div>
)
}Validación de atributos:
import myprop from 'prop-types'
static propTypes = {
title:myprop.string,
leftBtn:myprop.bool
}Propiedades por defecto:
static defaultProps = {
title:'标题'
}Resumen de atributos y estado:
(1) El atributo es la transmisión de datos y la operación del componente principal al componente secundario;
(2) El estado son los datos dentro del propio componente.
10. Ciclo de vida (función de gancho)
Solo componentes de clase (los componentes de función necesitan soporte de ganchos)
fase de inicialización
1, componente se montará
El componente está a punto de montarse, la última oportunidad para modificar el estado antes de renderizar;
Comúnmente utilizado en: inicialización de estado;
Nota: si hay una advertencia, use UNSAFE_componentWillMount ;
2, hacer
Solo puede acceder a accesorios en el estado, no puede modificar el estado y la salida del dom;
3, componenteDidMount
Una vez que el procesamiento se ejecuta con éxito y se completa el procesamiento del nodo dom, se puede modificar el dom;
Comúnmente utilizado en: solicitud de axios, llamada de función de suscripción, temporizador, operación dom;
etapa de carrera
1、componentWillReceiveProps(nextProps)
El componente principal modifica el activador de atributo;
Obtenga primero los atributos del componente principal, donde puede realizar solicitudes axios u otro procesamiento lógico;
Observaciones: si hay una advertencia, se puede usar UNSAFE_componentWillReceiveProps ;
2, debería actualizar el componente (nextProps, nextState)
Devolver false evitará la llamada de render;
El parámetro es el nuevo atributo y estado después de ser modificado;
3, componente se actualizará
El componente se actualizará y las propiedades y el estado no se pueden modificar;
Observaciones: si hay una advertencia, se puede usar UNSAFE_componentUpdate ;
4. el renderizado es el mismo que el renderizado en la inicialización
5, componenteDidUpdate(preProps,preState,value)
Dom se puede modificar;
El parámetro es el atributo y estado antes de ser modificado;
Fase de destrucción
1, el componente se desmontará
Limpie antes de quitar los componentes.