Reageer Hooks
Hakies is by React gevoeg in weergawe 16.8.
Hakies laat funksiekomponente toe om toegang tot staat en ander React-kenmerke te hê. As gevolg hiervan is klaskomponente oor die algemeen nie meer nodig nie.
Alhoewel Hooks gewoonlik klaskomponente vervang, is daar geen planne om klasse van React te verwyder nie.
Wat is 'n haak?
Hakies laat ons toe om te "haak" by React-kenmerke soos toestand en lewensiklusmetodes.
Voorbeeld:
Hier is 'n voorbeeld van 'n Hook. Moenie bekommerd wees as dit nie sin maak nie. Ons gaan in meer besonderhede in die volgende afdeling in .
import React, { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
Jy moet importHooks van react.
Hier gebruik ons die useStateHook om tred te hou met die toepassingstatus.
Staat verwys gewoonlik na toepassingsdata of -eienskappe wat nagespoor moet word.
Haakreëls
Daar is 3 reëls vir hake:
- Hakies kan slegs binne React-funksiekomponente genoem word.
- Hakies kan slegs op die boonste vlak van 'n komponent geroep word.
- Hakies kan nie voorwaardelik wees nie
Let wel: Hakies sal nie in React-klaskomponente werk nie.
Pasgemaakte hake
As jy statige logika het wat in verskeie komponente hergebruik moet word, kan jy jou eie pasgemaakte Hooks bou.
Ons gaan meer in detail in die Custom Hooks-afdeling .