Que sont les hooks dans React?
Les hooks sont une nouvelle fonctionnalité ajoutée dans React v16.8. Les hooks vous permettent d'utiliser toutes les fonctionnalités de React sans écrire de composants de classe. Par exemple, avant la version 16.8, nous avons besoin d'un composant de classe pour gérer l'état d'un composant. Nous pouvons maintenant enregistrer l'état dans un composant fonctionnel à l'aide du hook useState .
Les hooks React fonctionnent-ils dans les composants de classe?
Non.
Pourquoi les hooks ont-ils été introduits dans React?
L'une des raisons de l'introduction des hooks était la difficulté de travailler avec le mot-clé this à l' intérieur des composants de classe. S'il n'est pas géré correctement, cela aura une signification légèrement différente. Cela cassera des chaînes comme this.setState () et d'autres gestionnaires d'événements. En utilisant des hooks, nous évitons cette complexité lorsque nous travaillons avec des composants fonctionnels.
Les composants de classe ne se réduisent pas très bien et rendent également le rechargement à chaud peu fiable. C'est une autre raison de créer des hooks.
Une autre raison est qu'il n'existe pas de moyen spécifique de réutiliser la logique d'un composant avec état. Bien que les modèles HOC (Higher-Order Component) et Render Props (une méthode de transmission d'accessoires de parent à enfant à l'aide d'une fonction ou d'une fermeture) résolvent ce problème, le code du composant de classe doit être modifié ici. Les hooks vous permettent de partager une logique avec état sans modifier la hiérarchie des composants.
, . , (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);
}
Réécrivez ce code dans le style des hooks React.
Décision.
Pour utiliser la fonctionnalité de la méthode de cycle de vie componentWillUnmount () dans le hook useEffect, vous devez renvoyer un rappel avec le code qui doit être exécuté lorsque le composant est démonté.
useEffect(() => {
window.addEventListener("mousemove", handleMousePosition);
return () => {
window.removeEventListener("mousemove", handleMousePosition);
}
}, []);
La tâche d'utiliser useContext
Voici un extrait de code du composant 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>
);
}
}
Réécrivez le ConsumerComponent à l'aide du hook useContext .
Solution .
Les hooks ne peuvent être utilisés que dans un composant fonctionnel.
ConsumerComponent peut être réécrit comme ceci:
function ConsumerComponent() {
const name = useContext(NameContext);
const age = useContext(AgeContext);
return (
<div>
Name: {name}, Age: {age}
</div>
);
}