React Component API
La API de componentes React abarca varios aspectos importantes, incluidos los métodos de ciclo de vida, la gestión de estado, la transmisión de propiedades y el manejo de eventos.
A continuación se muestra una descripción detallada de la API de componentes React:
Métodos de ciclo de vida
Los métodos de ciclo de vida de los componentes React se dividen en tres fases principales: montaje, actualización y desmontaje. Consulte la descripción detallada en:Ciclo de vida de los componentes React 。
Fase de montaje
constructor(props): constructor, utilizado para inicializar el estado o enlazar métodos.static getDerivedStateFromProps(props, state): se invoca antes de llamar al método render, para actualizar el estado.componentDidMount(): se invoca después de montar el componente; en este momento se pueden realizar operaciones DOM o solicitudes de datos.
Ejemplo
constructor(props) {
super(props);
this.state = { count: 0 };
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.reset) {
return { count: 0 };
}
return null;
}
componentDidMount() {
console.log('Component mounted');
}
render() {
return <div>{this.state.count}</div>;
}
}
Fase de actualización
static getDerivedStateFromProps(props, state): igual que en la fase de montaje, se utiliza para actualizar el estado.shouldComponentUpdate(nextProps, nextState): devuelve un valor booleano que determina si el componente se vuelve a renderizar.render(): renderiza la UI del componente.getSnapshotBeforeUpdate(prevProps, prevState): se invoca antes de la actualización del DOM, para capturar cierta información (como la posición de desplazamiento).componentDidUpdate(prevProps, prevState, snapshot): se invoca después de la actualización del componente.
Ejemplo
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
return { scrollPosition: window.scrollY };
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot) {
window.scrollTo(0, snapshot.scrollPosition);
}
console.log('Component updated');
}
render() {
return <div>{this.state.count}</div>;
}
}
Fase de desmontaje
componentWillUnmount(): se invoca cuando el componente está a punto de desmontarse, para limpiar recursos (como temporizadores, listeners de eventos, etc.).
Ejemplo
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <div>{this.state.count}</div>;
}
}
Gestión de estado
El estado son los datos internos de un componente; se utilizathis.statepara definirlo y gestionarlo. A través delsetStatemétodo se actualiza el estado.
Ejemplo
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
Transmisión de propiedades
Accede a las propiedades pasadas al componente mediante this.props; se puede usar PropTypes para la comprobación de tipos.
Ejemplo
class MyComponent extends React.Component {
render() {
return <div>{this.props.title}</div>;
}
}
MyComponent.propTypes = {
title: PropTypes.string.isRequired,
};
// Usar el componente y pasar propiedades
<MyComponent title="Hello, World!" />
Manejo de eventos
Maneja la interacción del usuario mediante funciones de manejo de eventos. Es necesario usar .bind(this) o funciones de flecha para asegurar que this apunte correctamente.
Ejemplo
handleClick = () => {
console.log('Button clicked');
};
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
Renderizado condicional
Controla el renderizado del componente mediante declaraciones condicionales.
Ejemplo
constructor(props) {
super(props);
this.state = { isVisible: true };
}
toggleVisibility = () => {
this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
};
render() {
return (
<div>
{this.state.isVisible && <p>This is visible</p>}
<button onClick={this.toggleVisibility}>Toggle</button>
</div>
);
}
}
Renderizado de listas
Renderiza listas mediante el método map de los arrays.
Ejemplo
render() {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
}
Componentes controlados
Controla los valores de los elementos del formulario mediante el estado.
Ejemplo
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
};
handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted value:', this.state.value);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<button type="submit">Submit</button>
</form>
);
}
}
Establecer estado: setState
setState es el método en React para actualizar el estado de un componente.
El formato de sintaxis es el siguiente:
setState(object nextState[, function callback])
Descripción de parámetros
object nextState: un objeto que contiene los pares clave-valor del estado a actualizar. React combinará este objeto con el estado actual.function callback: una función de callback opcional que se ejecutará después de que el estado se actualice y se complete el re-renderizado.
Combina nextState con el state actual y vuelve a renderizar el componente.
setState es el método principal para desencadenar actualizaciones de la UI en los manejadores de eventos de React y en las funciones de callback de las solicitudes.
Acerca de setState
No se puede modificar el estado mediante this.state dentro del componente, porque ese estado será reemplazado después de llamar a setState().
setState() no cambia this.state inmediatamente, sino que crea un state que está a punto de procesarse. setState() no es necesariamente síncrono; para mejorar el rendimiento, React ejecuta en lote la actualización del state y el renderizado del DOM.
setState() siempre provocará un re-renderizado del componente, a menos que se haya implementado alguna lógica de renderizado condicional en shouldComponentUpdate().
Mediante el uso adecuado de setState, se puede gestionar eficazmente el estado del componente y asegurar que se ejecuten las operaciones necesarias después de la actualización del estado, mejorando así la capacidad de respuesta y la fiabilidad de la aplicación.
Ejemplo de React
Pruébalo »
En el ejemplo, al hacer clic en la etiqueta h2, el contador de clics se incrementa en 1.
Otras extensiones