驴Qu茅 son los ganchos en React?
Los ganchos son una nueva caracter铆stica agregada en React v16.8. Los Hooks te permiten usar todas las caracter铆sticas de React sin escribir componentes de clase. Por ejemplo, antes de la versi贸n 16.8, necesitamos un componente de clase para administrar el estado de un componente. Ahora podemos guardar el estado en el componente funcional usando el gancho useState .
驴Los enlaces de React funcionar谩n dentro de los componentes de la clase?
No.
驴Por qu茅 se introdujeron los ganchos en React?
Una de las razones para introducir ganchos fue la dificultad de trabajar con la palabra clave this dentro de los componentes de la clase. Si no se maneja correctamente, esto tendr谩 un significado ligeramente diferente. Esto romper谩 cadenas como this.setState () y otros controladores de eventos. Al usar ganchos, evitamos esta complejidad cuando trabajamos con componentes funcionales.
Los componentes de clase no se minimizan muy bien y tambi茅n hacen que la recarga en caliente no sea confiable. Esta es otra raz贸n para crear ganchos.
Otra raz贸n es que no existe una forma espec铆fica de reutilizar la l贸gica de un componente con estado. Aunque las plantillas HOC (Componente de orden superior) y Render Props (un m茅todo para pasar accesorios de padre a hijo mediante una funci贸n o cierre) resuelven este problema, el c贸digo del componente de clase debe cambiarse aqu铆. Los hooks le permiten compartir l贸gica con estado sin cambiar la jerarqu铆a de componentes.
, . , (fetch) componentDidMount() componentDidUpdate(). : componentDidMount() componentWillUnmount() . .
useState? ?
useState - , . 2 . - . - .
useState React
import React, {useState} from "react";
useState, :
const [currentStateValue, functionToUpdateState] = useState(initialStateValue);
useState
. , , .
class Counter extends Component {
state = {
count: 0,
};
incrementCount = () => {
this.setState({
count: this.state.count + 1,
});
};
render() {
return (
<div>
<button onClick={this.incrementCount}>Count: {this.state.count}</button>
</div>
);
}
}
, React.
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<button
onClick={() => {
setCount(count + 1);
}}
>
Count: {count}
</button>
</div>
);
}
useState 2
. .
class Counter extends Component {
state = { count: 0 };
incrementCount = () => {
this.setState((prevState) => {
return {
count: prevState.count + 1,
};
});
};
decrementCount = () => {
this.setState((prevState) => {
return {
count: prevState.count - 1,
};
});
};
render() {
return (
<div>
<strong>Count: {this.state.count}</strong>
<button onClick={this.incrementCount}>Increment</button>
<button onClick={this.decrementCount}>Decrement</button>
</div>
);
}
}
, React.
.
, callback. callback- .
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount((prevCount) => {
return prevCount + 1;
});
};
const decrementCount = () => {
setCount((prevCount) => {
return prevCount - 1;
});
};
return (
<div>
<strong>Count: {count}</strong>
<button onClick={incrementCount}>Increment</button>
<button onClick={decrementCount}>Decrement</button>
</div>
);
}
useState 3
, , .
export class Profile extends Component {
state = {
name: "Backbencher",
age: 23,
};
onNameChange = (e) => {
this.setState({
name: e.target.value,
});
};
onAgeChange = (e) => {
this.setState({
age: e.target.value,
});
};
render() {
return (
<div>
<form>
<input
type="text"
value={this.state.name}
onChange={this.onNameChange}
/>
<input
type="number"
value={this.state.age}
onChange={this.onAgeChange}
/>
<h2>
Name: {this.state.name}, Age: {this.state.age}
</h2>
</form>
</div>
);
}
}
, React.
import React, { useState } from "react";
function Profile() {
const [profile, setProfile] = useState({
name: "Backbencher",
age: 23,
});
const onNameChange = (e) => {
setProfile({ ...profile, name: e.target.value });
};
const onAgeChange = (e) => {
setProfile({ ...profile, age: e.target.value });
};
return (
<div>
<form>
<input type="text" value={profile.name} onChange={onNameChange} />
<input type="text" value={profile.age} onChange={onAgeChange} />
<h2>
Name: {profile.name}, Age: {profile.age}
</h2>
</form>
</div>
);
}
useState() , . setState() .
spread JavaScript.
?
setState() . , , , , , .
, setState() . useState() spread .
useEffect?
useEffect . . .
useEffect
, Boom , .
export class Banner extends Component {
state = {
count: 0,
};
updateState = () => {
this.setState({
count: this.state.count + 1,
});
};
componentDidMount() {
console.log("Boom");
}
componentDidUpdate() {
console.log("Boom");
}
render() {
return (
<div>
<button onClick={this.updateState}>State: {this.state.count}</button>
</div>
);
}
}
console.log React.
.
componentDidMount() componentDidUpdate() - . useEffect. useEffect - , callback. callback , .
:
import React, { useState, useEffect } from "react";
function Banner() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Boom");
});
const updateState = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={updateState}>State: {count}</button>
</div>
);
}
useEffect 2
:
function Banner() {
const [count, setCount] = useState(0);
const [name, setName] = useState("");
useEffect(() => {
console.log(" ");
});
return (
<div>
<button onClick={() => setCount(count + 1)}>State: {count}</button>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
);
}
芦 禄 . ?
.
useEffect , . props , . , , , . count .
useEffect:
useEffect(() => {
console.log("Count is updated");
}, [count]);
useEffect 3
, . componentDidMount() .
export class Clock extends Component {
state = {
date: new Date(),
};
componentDidMount() {
setInterval(() => {
this.setState({
date: new Date(),
});
}, 1000);
}
render() {
return <div>{this.state.date.toString()}</div>;
}
}
React.
.
componentDidMount() - , . useEffect, componentDidMount(). useEffect props . , - useState. . , React props, . , useEffect , componentDidMount().
React.
function Clock() {
const [date, setDate] = useState(new Date());
useEffect(() => {
setInterval(() => {
setDate(new Date());
}, 1000);
}, []);
return <div>{date.toString()}</div>;
}
useEffect 4
, .
componentDidMount() {
window.addEventListener("mousemove", this.handleMousePosition);
}
componentWillUnmount() {
window.removeEventListener("mousemove", this.handleMousePosition);
}
Reescribe este c贸digo al estilo de los ganchos de React.
Decisi贸n.
Para usar la funcionalidad del m茅todo de ciclo de vida componentWillUnmount () en el gancho useEffect, debe devolver una devoluci贸n de llamada con el c贸digo que debe ejecutarse cuando se desmonta el componente.
useEffect(() => {
window.addEventListener("mousemove", handleMousePosition);
return () => {
window.removeEventListener("mousemove", handleMousePosition);
}
}, []);
La tarea de usar useContext
Aqu铆 hay un fragmento de c贸digo del componente Context.Consumer.
import { NameContext, AgeContext } from "./ProviderComponent";
export class ConsumerComponent extends Component {
render() {
return (
<NameContext.Consumer>
{(name) => {
return (
<AgeContext.Consumer>
{(age) => (
<div>
Name: {name}, Age: {age}
</div>
)}
</AgeContext.Consumer>
);
}}
</NameContext.Consumer>
);
}
}
Reescriba el ConsumerComponent usando el gancho useContext .
Soluci贸n .
Los ganchos solo se pueden utilizar en un componente funcional.
ConsumerComponent se puede reescribir as铆:
function ConsumerComponent() {
const name = useContext(NameContext);
const age = useContext(AgeContext);
return (
<div>
Name: {name}, Age: {age}
</div>
);
}