Grundlegende React-Tricks, die jeder Entwickler kennen muss

React ist unglaublich leistungsfähig, aber um es zu beherrschen, muss man über die Grundlagen hinausgehen und einige weniger bekannte Tricks lernen, um die Entwicklung zu optimieren. Hier ist ein Überblick über meine persönlichen 20 Lieblings-React-Tricks, die Ihre Produktivität steigern und Ihnen helfen können, saubereren und effektiveren Code zu schreiben. Lassen Sie uns direkt in die Beispiele eintauchen!

---

1. Kurzschlussauswertung für bedingtes Rendering

Vermeiden Sie ausführliche if-Anweisungen für die bedingte Darstellung mit Kurzschlussauswertung.

{isLoading && <Spinner />}

Dadurch wird der Nur wenn isLoading wahr ist, bleibt Ihr JSX sauber.

---

2. Dynamische Klassennamen mit Klassennamen-Bibliothek

Die Klassennamenbibliothek erleichtert die bedingte Anwendung von Klassen.

npm install classnames

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

3. Aufwändige Berechnungen mit useMemo auswendig lernen

Wenn eine Berechnung kostspielig ist, merken Sie sie sich, damit React sie nicht unnötig neu berechnet.

const sortedData = useMemo(() => data.sort(), [data]);

Dadurch wird sortiertData nur dann neu berechnet, wenn sich Daten ändern.

---

4. Eingaben mit useEffect entprellen

Vermeiden Sie ständige Neu-Renderings, indem Sie Eingabeänderungen entprellen.

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

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

---

5. Benutzerdefinierte Hooks für wiederverwendbare Logik

Kapseln Sie die Logik in einem benutzerdefinierten Hook, um sie komponentenübergreifend wiederzuverwenden.

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

6. Lazy Loading Komponenten mit React.lazy

Optimieren Sie die Ladezeit, indem Sie Ihre Komponenten aufteilen.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

7. Zugriff auf frühere Requisiten oder Zustände mit useRef

Um auf frühere Zustandswerte zuzugreifen, verwenden Sie useRef.

const [count, setCount] = useState(0);
const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

---

8. Vermeiden Sie erneute Renderings, indem Sie Funktionen an useCallback übergeben

Wenn eine Funktion nicht geändert werden muss, merken Sie sie sich mit useCallback.

const increment = useCallback(() => setCount(count + 1), [count]);

---

9. Destrukturierende Requisiten für saubereren Code

Requisiten direkt in den Funktionsparametern zerstören.

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

10. React.Fragment zum Gruppieren von Elementen ohne zusätzliche Divs

Elemente umschließen, ohne einen zusätzlichen DOM-Knoten hinzuzufügen.

<>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</>

---

11. Fehlergrenzen zum Abfangen von JavaScript-Fehlern

Fehler in untergeordneten Komponenten abfangen, um zu verhindern, dass die gesamte App abstürzt.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

Jagroop2001 (Jagroop) · GitHub

?‍? Full-Stack-Entwickler | ? Entwickler für maschinelles Lernen | ? Dev Relations Pro – ? Zur Miete verfügbar – Jagroop2001

github.com

12. PropTypes für die Prop-Validierung verwenden

Erkennen Sie Fehler frühzeitig, indem Sie Requisitentypen definieren.

{isLoading && <Spinner />}

---

13. State Reducers mit useReducer

Für komplexe Zustandslogik kann useReducer effizienter sein.

npm install classnames

---

14. LayoutEffect für DOM-Manipulationen verwenden

Führen Sie Effekte nach DOM-Updates, aber vor dem Malen aus.

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

15. Zustandslogik mit Kontext und useContext kapseln

Erstellen Sie einen globalen Zustand ohne Bohren von Propellern.

const sortedData = useMemo(() => data.sort(), [data]);

---

16. Vermeiden Sie Inline-Funktionsdefinitionen in JSX

Das Definieren von Funktionen inline führt zu einem erneuten Rendern. Definieren Sie sie stattdessen außerhalb.

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

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

---

17. Verwenden Sie optionale Verkettung in JSX für sicheren Zugriff auf Eigenschaften

Null- oder undefinierte Werte ordnungsgemäß behandeln.

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

18. Verwenden Sie die Schlüsselstütze, um Probleme beim erneuten Rendern zu vermeiden

Verwenden Sie beim Rendern von Listen immer eindeutige Schlüssel.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

19. Exportieren Sie Komponenten mit benannten Exporten für eine bessere Importkontrolle

Benannte Exporte erleichtern den Import bestimmter Komponenten.

const [count, setCount] = useState(0);
const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

Dann nach Bedarf importieren:

const increment = useCallback(() => setCount(count + 1), [count]);

---

20. Wiederverwendbare Komponentenmuster: Komponenten höherer Ordnung (HOCs)

Umschließen Sie Komponenten mit HOCs, um zusätzliche Logik hinzuzufügen.

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

Wenn Sie diese Tricks beherrschen, können Sie prägnanteren, lesbareren und effizienteren React-Code schreiben! Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonGrundlegende React-Tricks, die jeder Entwickler kennen muss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!