Um die Anwendung robuster zu machen, muss man das OOPs-Konzept in ihrer Anwendung verwenden. Dennoch ist ReactJS an sich verbessert, sodass Sie sein Prinzip zum Erstellen von Anwendungen befolgen müssen. Heute werden wir sehen, wie und mit welchen Alternativen wir unsere Anwendung objektorientierter gestalten können

Was ist objektorientierte Programmierung in React?

Die objektorientierte Programmierung ist eine Möglichkeit, Ihren Code für ganze Apps und Dienste wiederverwendbarer zu machen. Ein Objekt kann effektiver mit anderen Objekten, Programmen und Benutzern interagieren als ein einfaches Javascript-Objekt

Wie können wir das erreichen?

Wenn Sie es vorziehen, Klassenkomponenten in Ihrer Anwendung zu verwenden, ist es viel einfacher, Hilfsmethoden und Zustände hinzuzufügen, aber die Herausforderung entsteht, wenn Sie mit Funktionskomponenten und Hooks arbeiten. Nehmen wir ein Beispiel, um zu sehen, was der erste Blocker bei der Verwendung regulärer Klassen für die funktionale Komponente ist

Ich habe eine Klasse erstellt, die im Kontext aufgerufen Userund verwendet useStatewird, während ich gleichzeitig zwei Methoden verfügbar mache setNameund getNameals Getter und Setter für mich agiere. Ich erhalte einen Fehler bei der Verwendung von useStateund ie

React Hook "useState" cannot be called in a class component.
React Hooks must be called in a React function component or 
a custom React Hook function. (react-hooks/rules-of-hooks)eslint

      
                

                    
                    
                
            

const user = new User('name')
  return (
    <div className="App">
      <button onClick={() => user.setName("first name")}>click</button>
      {user.getName()}
    </div>
  );

Verwenden des funktionalen Konstruktors für funktionale Komponenten

Da wir den Klassenkonstruktor nicht verwenden können, verwenden wir den funktionalen Konstruktor. Funktionen geben uns keine Fehler, aber sie reduzieren die Macht, die wir mit den Klassen haben. Das Verlängern wird zB etwas kompliziert

Für den Funktionskonstruktor können wir Eigenschaften definieren und sie genauso verwenden, wie wir es für den Klassenkonstruktor verwendet haben. Dieses Mal werden wir keine Fehler haben und die Dinge werden reibungslos funktionieren

Die Verwendung der folgenden Programmierung sieht wie im folgenden Snippet aus. Nachdem Sie auf jede Schaltfläche geklickt haben, werden die Änderungen angezeigt

export default function App() {
  const user = new User("hello");
  return (
    <div className="App">
      <button onClick={() => user.setAge(10)}>age</button>
      <button onClick={() => user.setProfile("first profile")}>profile</button>
      <button onClick={() => user.setName("first name")}>name</button>
      <button onClick={() => user.save()}>save</button>
    </div>
  );
}

// after save click - output from log
data: Object
  name: "first name"
  age: 10
  profile: "first profile"

Modell-Hooks sind Anwendungsfälle von Hooks, bei denen wir einen Ordner speziell für Modelle definieren Userund dort alle erforderlichen Hilfsmethoden aufbewahren, die als reguläre Instanz, mit der wir arbeiten, ausgeführt werden.

Die Idee hinter dieser Art von Hooks ist, alle Zustandsmethoden nur zusammen mit den Hilfsmethoden verfügbar zu machen und keine weiteren Hooks in den Kontext zu stellen, solange sie nicht von der Komponente benötigt werden. Ein Beispiel für einen solchen Hook folgt

Die Ausgabe des folgenden Hooks ist ebenfalls die gleiche wie bei einem funktionalen Konstruktor. Es gibt ein paar zusätzliche Punkte, die angegeben werden können

• Hooks funktionieren nur innerhalb der Komponente
• Der funktionale Konstruktor funktioniert außerhalb Ihrer Komponente, solange sie keinen Zustand verwenden

Die Verwendung der objektorientierten Programmierung ist für jede Anwendung wichtig, wenn viele Abhängigkeiten zu verwalten sind, und sie hilft Ihnen auch bei der Verwaltung Ihres Codes, wenn dieser zu skalieren beginnt.

Ich hoffe, Sie lernen heute etwas Neues. Den gesamten Quellcode finden Sie im Code-Sandbox-Link . Vielen Dank und viel Spaß beim Codieren!

Weitere Inhalte auf PlainEnglish.io . Melden Sie sich für unseren kostenlosen wöchentlichen Newsletter an . Folgen Sie uns auf Twitter , LinkedIn , YouTube und Discord .

Sind Sie daran interessiert, Ihr Software-Startup zu skalieren ? Schauen Sie sich die Schaltung an .