Was sind Hooks in React?
Hooks sind eine neue Funktion, die in React v16.8 hinzugefügt wurde. Mit Hooks können Sie alle Funktionen von React nutzen, ohne Klassenkomponenten zu schreiben. Vor Version 16.8 benötigen wir beispielsweise eine Klassenkomponente, um den Status einer Komponente zu verwalten. Wir können jetzt den Status in der Funktionskomponente mithilfe des useState-Hooks speichern .
Funktionieren React-Hooks in Klassenkomponenten?
Nein.
Warum wurden Hooks in React eingeführt?
Einer der Gründe für die Einführung von Hooks war die Schwierigkeit, mit diesem Schlüsselwort in Klassenkomponenten zu arbeiten. Wenn dies nicht richtig gehandhabt wird, hat dies eine etwas andere Bedeutung. Dadurch werden Zeichenfolgen wie this.setState () und andere Ereignishandler unterbrochen . Durch die Verwendung von Hooks vermeiden wir diese Komplexität bei der Arbeit mit Funktionskomponenten.
Klassenkomponenten werden nicht sehr gut minimiert und machen das Nachladen im laufenden Betrieb unzuverlässig. Dies ist ein weiterer Grund für das Erstellen von Hooks.
Ein weiterer Grund ist, dass es keine spezielle Möglichkeit gibt, die Logik einer Stateful Bean wiederzuverwenden. Obwohl HOC-Vorlagen (Component höherer Ordnung) und Render-Requisiten-Vorlagen (eine Methode zum Übergeben von Requisiten vom Elternteil an das Kind mithilfe einer Funktion oder eines Abschlusses) dieses Problem lösen, muss hier der Code der Klassenkomponente geändert werden. Mit Hooks können Sie statusbehaftete Logik gemeinsam nutzen, ohne die Komponentenhierarchie zu ändern.
, . , (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);
}
Schreiben Sie diesen Code im Stil von React-Hooks neu.
Entscheidung.
Um die Funktionalität der Lifecycle-Methode componentWillUnmount () im useEffect-Hook zu verwenden, müssen Sie einen Rückruf mit dem Code zurückgeben, der ausgeführt werden muss, wenn die Komponente nicht bereitgestellt wird.
useEffect(() => {
window.addEventListener("mousemove", handleMousePosition);
return () => {
window.removeEventListener("mousemove", handleMousePosition);
}
}, []);
Die useContext-Aufgabe
Hier ist ein Codefragment aus der Context.Consumer-Komponente.
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>
);
}
}
Schreiben Sie die ConsumerComponent mit dem useContext- Hook neu .
Lösung .
Haken können nur in einer Funktionskomponente verwendet werden.
ConsumerComponent kann folgendermaßen umgeschrieben werden:
function ConsumerComponent() {
const name = useContext(NameContext);
const age = useContext(AgeContext);
return (
<div>
Name: {name}, Age: {age}
</div>
);
}