React Academy · Lektion

Refaktorering af en HOC til en Custom Hook

Konvertér trin for trin en withAuth-HOC til en useAuth-hook.

Lektion 4 af 413 trin

Refaktorering af en HOC til en Custom Hook er en gratis React Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion refaktorerer du trin for trin en withAuth-HOC til en brugerdefineret useAuth-hook, så du præcis kan se, hvorfor hook-versionen er renere og lettere at teste.

withAuth-HOC'en (udgangspunkt)

HOC'en modtager en komponent, kontrollerer, om brugeren er godkendt, og viderestiller til /login, hvis ikke. Den indsætter brugeren som en prop.

function withAuth(Component) {
  return function AuthGuard(props) {
    const { user, loading } = useAuthState();
    if (loading) return <Spinner />;
    if (!user) return <Navigate to="/login" />;
    return <Component {...props} user={user} />;
  };
}

const ProtectedPage = withAuth(MyPage);

Problemer med HOC'en

HOC'en: (1) tilføjer en wrapper i DevTools, (2) indsætter implicit `user`-proppen — komponenten skal vide, at den skal forvente den, (3) er svær at teste uden at rendere hele HOC-wrapperen, (4) kan ikke let sammensættes med andre hooks.

Trin 1: Udtræk logikken til en hook

Flyt al logikken fra HOC'en til en brugerdefineret hook. Hooket returnerer godkendelsestilstanden direkte — ingen indpakning og ingen indsættelse af props.

function useAuth() {
  const { user, loading } = useAuthState();
  return { user, loading, isAuthenticated: !!user };
}

Trin 2: Håndtér viderestillinger i hooket

Flyt logikken til viderestilling til en separat hook (f.eks. useRequireAuth), der kalder navigate internt og returnerer brugeren.

function useRequireAuth(redirectTo = '/login') {
  const { user, loading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!loading && !user) navigate(redirectTo);
  }, [user, loading, navigate, redirectTo]);

  return { user, loading };
}

Trin 3: Opdatér komponenten

Erstat HOC-wrapperen med et direkte hook-kald inde i komponenten. Komponenten kalder eksplicit useRequireAuth og håndterer indlæsning. Dens afhængighed er nu synlig.

function MyPage() {
  const { user, loading } = useRequireAuth();
  if (loading) return <Spinner />;
  return <p>Hello, {user.name}</p>;
}

Sammenligning af fordelene

Hook-versionen: (1) ingen ekstra wrapper i DevTools, (2) eksplicit afhængighed — du kan se `useRequireAuth` i komponenten, (3) kan testes ved at simulere hooket, (4) kan sammensættes med andre hooks i den samme komponent.

Test af hook-versionen

Simulér useRequireAuth i din test ved at erstatte modulets eksport. Komponenttesten behøver kun at rendere komponenten og kontrollere resultatet — der kræves ingen HOC-opsætning.

vi.mock('./useRequireAuth', () => ({
  useRequireAuth: () => ({ user: mockUser, loading: false })
}));

render(<MyPage />);
expect(screen.getByText('Hello, Alice')).toBeInTheDocument();

Hvornår bør du beholde en HOC

Behold HOC'en, hvis du har brug for at beskytte mange komponenter deklarativt (f.eks. i rutedefinitioner) og ikke vil tilføje hook-kaldet til hver enkelt. Du kan endda bygge HOC'en OVEN PÅ hooket.

function withAuth(Component) {
  return function (props) {
    const { user, loading } = useRequireAuth();
    if (loading) return <Spinner />;
    return <Component {...props} user={user} />;
  };
}

Det bedste fra begge verdener

Den endelige arkitektur: en useRequireAuth-hook til direkte brug i komponenter OG en tynd withAuth-HOC, der bygger oven på den, til deklarativ rutebeskyttelse. Begge deler den samme hook-logik.

Hurtigt tjek

Hvad er den største fordel ved at kalde useRequireAuth inde i en komponent i stedet for at pakke den ind med en withAuth-HOC?

Besvar den i den interaktive lektion

Opsummering

Refaktorer HOC'er til hooks ved at udtrække logikken til en brugerdefineret hook, flytte bivirkninger (f.eks. viderestillinger) ind i hooket og kalde hooket direkte i komponenten. Byg en tynd HOC oven på hooket, når der er brug for deklarativ indpakning.

Kursus gennemført

Tillykke! Du har gennemført **React-mønstre: Render Props og HOC'er**. Du forstår nu begge klassiske mønstre, deres kompromiser, og hvordan du refaktorerer dem til moderne brugerdefinerede hooks.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Refaktorering af en HOC til en Custom Hook” gratis?

Ja — hele teksten til “Refaktorering af en HOC til en Custom Hook” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Refaktorering af en HOC til en Custom Hook”?

Konvertér trin for trin en withAuth-HOC til en useAuth-hook. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Refaktorering af en HOC til en Custom Hook”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Mønsteret Render Props
Higher-Order Components (HOCs) forklaret
HOC vs. Render Props vs. Custom Hooks
Refaktorering af en HOC til en Custom Hook

← Tilbage til React Academy