[Meta] Refactors of React hooks

Aperta
#41,795 1 commento 2 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

La issue non indica file, test o punti di ingresso; inizia chiarendo quali pattern degli hook React e quali selezioni delle dipendenze rientrano nell’ambito. Il lavoro sarebbe completato quando fossero definiti un insieme di pattern concordato e un comportamento osservabile del refactoring per gli esempi useMemo, useCallback e JSX, con test definiti per questi casi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Awaiting More Feedback Suggestion

Search Terms

refactor, react, hooks

Suggestion

Provide a series of refactors about react hooks.

Use Cases

In my recently works. I have alway Wrap function, value declarations, expressions into React.useMemo or React.useCallback.
And I must find all the depends on the selection. And always missing some deps. It's not a good experience.

Could we provide some refactors to wrap something into well-known react hooks?

I'm not sure where's the bar of patterns we are allowed. but we have already had something like 'react-jsx'.

Examples


const Comp = props => {
  const value = props.a + props.b;

  const handleClick = () => {
    console.log('foo', value)
  }

  return <div onClick={handleClick}><SomeHeavyComponent value={value}/></div>
}
  • When I select props.a + props.b, convert into
React.useMemo(() => props.a + props.b, [props.a, props.b]);
  • When I select handleClick or the lambda, convert into
const handleClick = React.userCallback() => {
  console.log('foo', value)
}, [value])
  • When I select <SomeHeavyComponent value={value}/>, convert into
React.useMemo(() => (<SomeHeavyComponent value={value}/>), [value])

Checklist

My suggestion meets these guidelines:

  • This wouldn't be a breaking change in existing TypeScript/JavaScript code
  • This wouldn't change the runtime behavior of existing JavaScript code
  • This could be implemented without emitting different JS based on the types of the expressions
  • This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
  • This feature would agree with the rest of TypeScript's Design Goals.
Lingua principale
Go
Stelle
111k
Fork
14.4k
Merge medio
1g 19h
PR unite (30g)
117

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/TypeScript

Tutte le issue di microsoft/TypeScript

Issue simili

Altre issue su Go

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.