Dinge, von denen ich wünschte, ich wüsste sie, als ich mit React anfing

Lehren aus 3 Jahren React-Entwicklung

Als ich zum ersten Mal in React eintauchte, fühlte es sich an, als würde ich die Büchse der Pandora öffnen. Es gab so viel zu lernen und auf dem Weg dorthin stieß ich auf jede Menge „Aha!“ Momente. Hier sind 10 Dinge, die ich zu Beginn gerne gewusst hätte, damit Sie auf Ihrer React-Reise ein paar Bremsschwellen überspringen können.

1. Komponenten sind nur Funktionen

Die wichtigste Erkenntnis? React-Komponenten sind lediglich JavaScript-Funktionen. Sie übergeben Requisiten als Argumente und sie geben JSX zurück, das wie HTML aussieht, es aber nicht ist. Wenn Sie Komponenten auf diese Weise betrachten, wird das Verständnis von Konzepten wie Requisiten und Zustand viel einfacher.

const MyComponent = (props) => {
  return <h1>{props.title}</h1>;
};

2. Staat und Requisiten sind unterschiedlich

Das mag jetzt vielleicht einfach erscheinen, aber zu Beginn war mir der Unterschied zwischen Requisiten und Zustand nicht klar. Hier ist eine kurze Auffrischung:

• Requisiten sind extern und unveränderlich (Daten, die Sie an die Komponente übergeben).
• Zustand ist intern und veränderbar (wird innerhalb der Komponente verwaltet).

Im Zweifelsfall: Wenn die Daten vom Elternteil stammen, handelt es sich um Requisiten. Wenn sich die Daten innerhalb der Komponente befinden, handelt es sich um den Status.

3. Hooks sind bahnbrechend

Als React Hooks einführte, war das ein Wendepunkt. Anstatt mit Lebenszyklusmethoden zu jonglieren, können Sie Status- und Nebenwirkungen jetzt einfach mithilfe von Hooks wie useState und useEffect verwalten. Ich wünschte, ich hätte von Anfang an gewusst, wie leistungsstark und einfach diese Hooks meinen Code machen können.

const [count, setCount] = useState(0);
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

4. Das virtuelle DOM verstehen

Ich habe erst später vollständig verstanden, wie das virtuelle DOM von React funktioniert, und das war ein Fehler. Die Effizienz von React ergibt sich aus der direkten Aktualisierung des virtuellen DOM anstelle des realen DOM. Durch die Differenzierung der Änderungen aktualisiert React nur das Notwendige und macht Ihre Apps schnell.

5. Komponentenzusammensetzung über Vererbung

React bevorzugt die Komponentenzusammensetzung (ineinander verschachtelte Komponenten) anstelle einer klassenbasierten Vererbung. Wenn Sie Logik komponentenübergreifend wiederverwenden müssen, ist es besser, sie in wiederverwendbare Komponenten oder benutzerdefinierte Hooks zu extrahieren, als Vererbung zu verwenden.

const Greeting = ({name}) => <h1>Hello, {name}!</h1>;
const Page = () => <Greeting name="John" />;

6. Staatsverwaltung ist eine Kunst

Wenn Ihre App wächst, wird die Statusverwaltung schwieriger. Der lokale Komponentenstatus eignet sich gut für kleinere Apps, aber für größere Apps helfen Tools wie die Kontext-API oder Bibliotheken wie Redux dabei, den Status Ihrer gesamten Anwendung zu verwalten. Ich habe zu früh mit Redux angefangen, aber jetzt weiß ich, wann ich mich auf einfachere Lösungen wie useContext oder useReducer stützen muss, bevor ich schwerere Tools einführe.

const MyContext = React.createContext();
const App = () => {
  return (
    <MyContext.Provider value={/* some value */}>
      <ComponentA />
    </MyContext.Provider>
  );
};

7. TypeScript ist die Mühe wert

Wenn Sie an größeren Codebasen arbeiten, lohnt sich die Einführung von TypeScript. Durch die Durchsetzung von Typen können Fehler frühzeitig verhindert werden, und die Zusammenarbeit mit anderen Entwicklern wird reibungsloser. Anfangs hatte ich Probleme mit TypeScript, aber als ich mich damit beschäftigte, wurde mein React-Code viel robuster.

interface Props {
  title: string;
}
const MyComponent: React.FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

8. CSS-in-JS für Scoped Styling

Als ich anfing, kämpfte ich mit globalen Stilen, die miteinander kollidierten. CSS-in-JS-Bibliotheken wie styled-components oder Emotion haben für mich das Spiel verändert, indem sie bereichsbezogene Stile ermöglicht haben, die neben der Komponentenlogik leben.

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

const App = () => <Button>Click Me</Button>;

9. Testen ist einfacher als Sie denken

Das Testen von React-Komponenten war einschüchternd, aber Tools wie React Testing Library und Jest machen es einfach. Schreiben Sie Tests für wichtige Komponenten, um sicherzustellen, dass sie sich wie erwartet verhalten, und Sie werden es sich später danken.

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders the title', () => {
  const { getByText } = render(<MyComponent title="Hello" />);
  expect(getByText(/Hello/i)).toBeInTheDocument();
});

10. Optimierung ist wichtig

Wenn Ihre App skaliert wird, möchten Sie sie hinsichtlich der Leistung optimieren. Techniken wie das Memoisieren (React.memo), das verzögerte Laden von Komponenten (React.lazy) und das Aufteilen von Code (React.Suspense) können die Benutzererfahrung drastisch verbessern. Leistung stand für mich anfangs nicht im Vordergrund, aber für Sie sollte es das sein!

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

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

Abschließende Gedanken

React ist ein erstaunliches Tool zum Erstellen dynamischer Benutzeroberflächen, aber wie jede Technologie erfordert es eine Lernkurve. Machen Sie sich mit den Grundlagen vertraut und scheuen Sie sich nicht davor, fortgeschrittene Konzepte auszuprobieren. Am wichtigsten ist: Bauen Sie weiter!

Das sind die 10 Dinge, von denen ich wünschte, ich wüsste sie von Anfang an. Hoffentlich ersparen sie Ihnen auf Ihrer React-Reise etwas Zeit und Frust.

Hat das geholfen? Hinterlassen Sie einen Kommentar oder teilen Sie unten Ihre eigenen React-Tipps!

Das obige ist der detaillierte Inhalt vonDinge, von denen ich wünschte, ich wüsste sie, als ich mit React anfing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!