React-fusklapp

Gratis

En sökbar, utskrivbar React 19-referens — komponenter, JSX, hooks, de nya Actions-API:erna, context, refs och prestanda. Gratis.

Komponenter och JSX

function App() { return <h1>Hi</h1>; }

En funktionskomponent som returnerar JSX

export default function App() {}

Standardexportera en komponent

<Greeting name="Ada" />

Rendera en komponent med props

{1 + 2} or {user.name}

Bädda in ett JS-uttryck med klamrar

<>{a}{b}</>

Fragment grupperar noder, ingen extra DOM

<div className="card">

Använd className, inte class, för CSS

{isOpen && <Menu />}

Rendera villkorligt med &&

{ok ? <Yes /> : <No />}

Välj mellan noder med en ternär operator

{items.map(i => <li key={i.id}>{i.t}</li>)}

Rendera en lista från en array

function Btn({ label, onClick }) {}

Destrukturera props i signaturen

function Card({ children }) { return children; }

Läs nästlad JSX via children-propen

<input value={v} onChange={onChange} />

Kontrollerat fält bundet till state

Rendering och uppsättning

import { createRoot } from 'react-dom/client'

Importera client-root-API:et

createRoot(document.getElementById('root')).render(<App/>)

Montera appen i DOM:en

import { StrictMode } from 'react'

Importera StrictMode-omslaget

<StrictMode><App /></StrictMode>

Lyft fram buggar under utveckling

import { hydrateRoot } from 'react-dom/client'

Importera hydrerings-API:et

hydrateRoot(el, <App />)

Koppla React till server-HTML

root.unmount()

Riv ner en monterad rot

import App from './App.jsx'

Importera en komponent från en modul

<App {...props} />

Sprid ett objekt som props

export { Button, Card }

Namnexportera flera komponenter

State och effekter

const [count, setCount] = useState(0)

Deklarera en state-variabel

setCount(c => c + 1)

Uppdatera från det föregående värdet

setUser(u => ({ ...u, name }))

Uppdatera objekt-state oföränderligt

useEffect(() => { run(); }, [dep])

Kör en effekt när beroenden ändras

useEffect(() => { /* once */ }, [])

Kör en effekt endast vid montering

useEffect(() => () => cleanup(), [])

Returnera en rensningsfunktion

const ref = useRef(null)

Håll ett föränderligt värde över renderingar

const [state, dispatch] = useReducer(r, init)

Hantera komplext state med en reducer

const theme = useContext(ThemeContext)

Läs det närmaste kontextvärdet

const memo = useMemo(() => calc(a), [a])

Memoisera en kostsam beräkning

useLayoutEffect(() => {}, [])

Kör synkront efter layout

useSyncExternalStore(sub, get)

Prenumerera på en extern store

React 19-hooks och -API:er

import { use } from 'react'

Importera det nya use-API:et

const data = use(promise)

Läs ett promise, pausar tills det är klart

const theme = use(ThemeContext)

Läs kontext, tillåtet villkorligt

const [state, action, pending] = useActionState(fn, init)

Spåra state, action och pending

const [opt, addOpt] = useOptimistic(state, reducer)

Visa ett optimistiskt värde direkt

const { pending } = useFormStatus()

Läs föräldraformulärets submit-status

const [isPending, startTransition] = useTransition()

Markera uppdateringar som icke-brådskande

startTransition(async () => await save())

Kör en asynkron Action i en transition

const deferred = useDeferredValue(value)

Skjut upp ett värde för att hålla UI responsivt

const id = useId()

Generera ett stabilt unikt id

<title>Page title</title>

Rendera metadata var som helst i trädet

function Input({ ref }) {}

ref är en vanlig prop, ingen forwardRef

Formulär och Actions

<form action={handleSubmit}>

Skicka en funktion som en form-Action

function handleSubmit(formData) {}

Action tar emot FormData

formData.get('email')

Läs ett fält från FormData

const [state, action] = useActionState(submit, null)

Koppla en Action till komponent-state

<form action={action}>

Använd den omslutna Action:en på formuläret

const [s, a, pending] = useActionState(fn, init)

Exponera en pending-flagga för UI:t

return { error: 'Invalid' }

Returnera feltillstånd från en Action

function Submit() { const { pending } = useFormStatus() }

Läs pending inuti submit-knappen

<button disabled={pending}>Save</button>

Inaktivera submit medan pending

import { requestFormReset } from 'react-dom'

Importera form-reset-hjälpfunktionen

requestFormReset(formEl)

Återställ ett okontrollerat formulär

<form action={action}><Submit /></form>

Komponera Action-formulär med status

Props och komposition

function Hi({ name = 'Guest' }) {}

Standard-prop via destrukturering

function Box({ children }) { return children; }

Omslut innehåll med children-propen

<Box><p>Inside</p></Box>

Skicka JSX som children

function List({ render }) { return render(); }

Render-prop-mönster

<List render={() => <Item />} />

Tillhandahåll en render-funktion

<Input {...props} />

Vidarebefordra alla props med spread

const { id, ...rest } = props

Välj en prop och skicka resten

<Avatar {...rest} size="lg" />

Sprid och åsidosätt sedan en prop

function Btn(props: BtnProps) {}

Typa props med TypeScript-gränssnitt

<Slot label={<b>Hi</b>} />

Skicka JSX via en namngiven prop

Händelser

<button onClick={handleClick}>

Koppla en klickhanterare

function handleClick(e) {}

Ta emot den syntetiska händelsen

<input onChange={e => set(e.target.value)} />

Läs ett inmatningsvärde vid ändring

<form onSubmit={e => e.preventDefault()}>

Stoppa formulärets standardinsändning

e.stopPropagation()

Förhindra att händelsen bubblar

<li onClick={() => remove(id)}>

Skicka argument med en closure

<input onKeyDown={e => e.key === 'Enter'}

Hantera en specifik tangenttryckning

<div onMouseEnter={hover}>

Lyssna efter pekarhändelser

e.currentTarget.value

Läs elementet som hanteraren sitter på

<button onClick={() => {}} type="button">

Undvik implicit formulärinsändning

Listor och nycklar

arr.map(x => <li key={x.id}>{x.t}</li>)

Rendera en nod per objekt

key={item.id}

Ge varje objekt en stabil nyckel

key={index}

Indexnycklar endast för statiska listor

users.map(u => <Card key={u.id} {...u} />)

Sprid objektfält som props

{list.length === 0 && <Empty />}

Visa en reserv för tomma listor

import { Fragment } from 'react'

Importera Fragment för nyckelförsedda grupper

<Fragment key={id}>{a}{b}</Fragment>

Ett nyckelförsett fragment i en lista

{rows.filter(r => r.on).map(...)}

Filtrera före mappning

Keys must be unique among siblings

Varför nycklar hjälper React att diffa listor

{[...Array(n)].map((_, i) => ...)}

Mappa ett intervall med fast längd

Kontext

const ThemeContext = createContext('light')

Skapa en kontext med ett standardvärde

import { createContext } from 'react'

Importera kontextfabriken

<ThemeContext value={theme}>

Tillhandahåll ett värde (React 19-syntax)

<ThemeContext value={theme}><App /></ThemeContext>

Omslut trädet som läser den

const theme = useContext(ThemeContext)

Läs kontext med useContext

const theme = use(ThemeContext)

Läs kontext med use-API:et

if (cond) { const t = use(Ctx); }

use kan läsa kontext villkorligt

export const ThemeContext = createContext()

Exportera en delad kontext

<Ctx value={{ user, setUser }}>

Skicka ett objekt som värdet

Avoid new objects each render

Memoisera värden för att begränsa omrenderingar

Refs

const inputRef = useRef(null)

Skapa en ref-hållare

<input ref={inputRef} />

Koppla ref:en till en nod

inputRef.current.focus()

Åtkomst till DOM-noden via current

function Field({ ref }) { return <input ref={ref} /> }

ref som en prop, ingen forwardRef

<Field ref={inputRef} />

Skicka en ref till en komponent

useImperativeHandle(ref, () => ({ focus }))

Exponera ett imperativt API

const setRef = node => { box = node; }

Använd en callback-ref

<div ref={setRef} />

Koppla en callback-ref

const count = useRef(0)

Lagra ett värde utan omrendering

ref={node => { return () => cleanup(); }}

Callback-ref med rensning (React 19)

Prestanda

const Memo = memo(Component)

Hoppa över omrendering när props är lika

import { memo } from 'react'

Importera memo-hjälpfunktionen

const value = useMemo(() => calc(a), [a])

Cacha ett beräknat värde

const fn = useCallback(() => f(a), [a])

Cacha en funktionsidentitet

const Lazy = lazy(() => import('./Big.jsx'))

Koddela en komponent

import { lazy, Suspense } from 'react'

Importera lazy och Suspense

<Suspense fallback={<Spin />}><Lazy /></Suspense>

Visa en reserv under laddning

startTransition(() => setQuery(q))

Markera icke-brådskande state-uppdateringar

const slow = useDeferredValue(query)

Skjut upp kostsamt härlett UI

React Compiler auto-memoizes

Tar ofta bort manuell memoisering

Övrigt och metadata

<Suspense fallback={<Loading />}>

Gräns för asynkront innehåll

class ErrorBoundary extends Component {}

Fånga renderingsfel (äldre klass)

<title>My Page</title>

Lyft dokumenttitel från en komponent

<meta name="description" content="..." />

Rendera metataggar in i head

<link rel="stylesheet" href="..." />

Lyft en stilmallslänk

<Comp key={id} />

Ändra key för att montera om en komponent

React.lazy(() => import('./Page.jsx'))

Importera en ruttkomponent lat

createPortal(node, container)

Rendera in i en annan DOM-nod

{/* a comment */}

Skriv en kommentar inuti JSX

cleanup return in useEffect

Frigör alltid prenumerationer/timrar

Ingen post matchar “:q”.

Behöver du hjälp?

Hittade du ett problem med det här verktyget? Berätta för oss.

Rapportera ett problem

Lägg till det här gratisverktyget på din egen webbplats — kopiera och klistra in koden nedan.

<iframe src="https://tweakee.com/sv/studio/dev/react-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>