Best Practices zum Teilen von React-Code

Wenn ein Projekt eine gewisse Komplexität erreicht, wird es zwangsläufig mit dem Problem der Wiederverwendung von Logik konfrontiert. Normalerweise gibt es in React mehrere Möglichkeiten, die Wiederverwendung von Logik zu implementieren: Mixin ,高階組件(HOC) ,修飾器(decorator) , Render Props , Hook . In diesem Artikel werden hauptsächlich die Vor- und Nachteile der oben genannten Methoden analysiert, um Entwicklern dabei zu helfen, geeignetere Methoden für Geschäftsszenarien zu entwickeln.

Mischen

Dies ist möglicherweise die erste Methode, die Entwicklern einfällt, die gerade von Vue zu React gewechselt sind. Mixin wird in verschiedenen objektorientierten Sprachen häufig verwendet. Seine Funktion besteht darin, einen Effekt zu erzeugen, der der Mehrfachvererbung für Sprachen mit einfacher Vererbung ähnelt. Obwohl React es inzwischen aufgegeben hat, war Mixin tatsächlich ein Designmuster React um Code-Sharing zu erreichen.

Die verallgemeinerte Mixin-Methode besteht darin, alle Methoden im Mixin-Objekt durch Zuweisung an das Originalobjekt anzuhängen, um eine Objektmischung zu erreichen, ähnlich der Funktion von Object.assign() in ES6. Und so funktioniert es:

const mixin = Funktion (Objekt, Mixins) {
  const newObj = obj
  neuesObj.prototype = Objekt.erstellen(obj.prototype)

  für (let-Eigenschaft in Mixins) {
    // Durchlaufe die Eigenschaften der Mixins if (mixins.hasOwnPrototype(prop)) {
      // Bestimmen Sie, ob es sich um eine eigene Eigenschaft eines Mixins handelt newObj.prototype[prop] = mixins[prop]; // Zuweisung}
  }
  neuesObjekt zurückgeben
};

Mixins in React verwenden

Angenommen, in unserem Projekt müssen mehrere Komponenten das Standard name festlegen. Durch die Verwendung von mixin müssen wir nicht mehrere identische getDefaultProps -Methoden in verschiedenen Komponenten schreiben. Wir können ein mixin definieren:

const DefaultNameMixin = {
  getDefaultProps: Funktion () {
    zurückkehren {
      Name: "Freude"
    }
  }
}

Um mixin zu verwenden, müssen wir der Komponente eine mixins Eigenschaft hinzufügen, dann mixin in ein Array packen und es als Attributwert von mixins verwenden:

const ComponentOne = React.createClass({
  Mixins: [StandardnameMixin]
  rendern: Funktion () {
    return <h2>Hallo {this.props.name}</h2>
  }
})

Das geschriebene mixin kann in anderen Komponenten wiederverwendet werden.

Da mixins -Attributwert ein Array ist, bedeutet dies, dass wir mehrere mixin in derselben Komponente aufrufen können. Eine kleine Änderung im obigen Beispiel ergibt:

const DefaultFriendMixin = {
  getDefaultProps: Funktion () {
    zurückkehren {
      Freund: "Lecker"
    }
  }
}

const ComponentOne = React.createClass({
  Mixins: [StandardnameMixin, StandardfreundMixin]
  rendern: Funktion () {
    zurückkehren (
      <div>
        <h2>Hallo {this.props.name}</h2>
        <h2>Das ist mein Freund {this.props.friend}</h2>
      </div>
    )
  }
})

Wir können sogar andere mixin in ein mixin einschließen.

Schreiben Sie beispielsweise ein neues mixin``DefaultProps , das die oben genannten DefaultNameMixin und DefaultFriendMixin enthält:

const DefaultPropsMixin = {
  Mixins: [StandardnameMixin, StandardfreundMixin]
}

const ComponentOne = React.createClass({
  Mixins: [DefaultPropsMixin]
  rendern: Funktion () {
    zurückkehren (
      <div>
        <h2>Hallo {this.props.name}</h2>
        <h2>Das ist mein Freund {this.props.friend}</h2>
      </div>
    )
  }
})

An dieser Stelle können wir feststellen, dass mixin zumindest die folgenden Vorteile hat:

• Derselbe mixin kann in mehreren Komponenten verwendet werden;
• Sie können mehrere mixin in derselben Komponente verwenden.
• Sie können mehrere mixin im selben mixin verschachteln.

Allerdings können sich Vorteile in verschiedenen Szenarien auch in Nachteile verwandeln:

• Zerstören Sie die Kapselung der ursprünglichen Komponente, und Sie müssen möglicherweise neue Zustände wie state und props beibehalten;
• Die Benennung in verschiedenen mixin ist unbekannt und es kommt sehr wahrscheinlich zu Konflikten.
• Es können Probleme beim rekursiven Aufruf auftreten, die die Projektkomplexität und den Wartungsaufwand erhöhen.

Darüber hinaus verfügt mixin über eine eigene Verarbeitungslogik für Probleme wie Statuskonflikte, Methodenkonflikte und die Reihenfolge, in der mehrere Lebenszyklusmethoden aufgerufen werden. Interessierte Studierende können sich auf die folgenden Artikel beziehen:

Verwenden von React-Mixins

Als schädlich geltende Mixins

Komponenten höherer Ordnung

Aufgrund der oben genannten Mängel von mixin hat React mixin entfernt und durch高階組件ersetzt.

高階組件ist im Wesentlichen eine Funktion, die eine Komponente als Parameter verwendet und eine neue Komponente zurückgibt.

React Mitarbeiter verwendeten bei der Implementierung einiger allgemeiner Komponenten auch高階組件, wie z. B. withRouter in react-router und connect in Redux . Hier nehmen wir withRouter als Beispiel.

Standardmäßig verfügen nur Komponenten, die durch Route Routing Matching gerendert wurden, über this.props und路由參數und können函數式導航verwenden, um this.props.history.push('/next') auszuführen und zur Seite der entsprechenden Route zu springen. Die Funktion von withRouter in高階組件besteht darin, eine Komponente, die nicht von Route Route umschlossen ist, in Route einzubinden, um so die drei Objekte history , location und „ match “ des react-router in props Attribut der Komponente einzufügen und so函數式導航跳轉zu realisieren.

Das Implementierungsprinzip von withRouter :

const mitRouter = (Komponente) => {
  const displayName = `mitRouter(${Component.displayName || Component.name})`
  const C = Eigenschaften => {
    const { wrappedComponentRef, ...restlicheProps } = props
    zurückkehren (
      <RouterContext.Verbraucher>
        {Kontext => {
          invariant
            Kontext,
            `Sie sollten <${displayName} /> nicht außerhalb eines <Routers> verwenden`
          );
          zurückkehren (
            <Komponente
              {...verbleibendeProps}
              {...Kontext}
              ref={wrappedComponentRef}
            />
          )
        }}
      </RouterContext.Consumer>
    )
}

Code verwenden:

importiere React, {Komponente} von "react"
importiere { mit Router } von "react-router"
Klasse TopHeader erweitert Komponente {
  rendern() {
    zurückkehren (
      <div>
        Navigationsleiste {/* Klicken Sie hier, um zur Anmeldung zu springen */}
        <button onClick={this.exit}>Beenden</button>
      </div>
    )
  }

  beenden = () => {
    // Nachdem es von der High-Order-Funktion withRouter umschlossen wurde, können Sie this.props verwenden, um zur Operation this.props.history.push("/login") zu springen.
  }
}
// Verwenden Sie withRouter, um die Komponente zu umschließen und Verlauf, Standort usw. zurückzugeben. export default withRouter(TopHeader)

Da das Wesen高階組件獲取組件并且返回新組件的方法, kann theoretisch auch eine mehrfache Verschachtelung wie mixin erreicht werden.

Zum Beispiel:

Schreiben Sie eine Funktion höherer Ordnung, die das Singen ermöglicht

importiere React, {Komponente} von 'react'

const widthSinging = WrappedComponent => {
	Rückgabeklasse HOC erweitert Komponente {
		Konstruktor () {
			super(...Argumente)
			dies.singen = dies.singen.binden(dies)
		}

		Singen = () => {
			console.log('ich singe!')
		}

		rendern() {
			return <WrappedComponent />
		}
	}
}

Schreiben Sie eine High-Order-Funktion, die Tanzen ermöglicht

importiere React, {Komponente} von 'react'

const widthDancing = WrappedComponent => {
	Rückgabeklasse HOC erweitert Komponente {
		Konstruktor () {
			super(...Argumente)
			dies.tanzen = dies.tanzen.binden(dies)
		}

		tanzen = () => {
			console.log('ich tanze!')
		}

		rendern() {
			return <WrappedComponent />
		}
	}
}

Verwenden Sie die oben genannten High-Level-Komponenten

importiere React, {Komponente} von "react"
importiere { widthSing, widthDancing } von "hocs"

Klasse Joy erweitert Komponente {
  rendern() {
    return <div>Freude</div>
  }
}

// Joy die Fähigkeit zum Singen und Tanzen geben export default widthSinging(withDancing(Joy))

Aus dem Obigen können wir ersehen, dass wir durch einfaches Umhüllen mit Funktionen höherer Ordnung die ursprünglich einfache Joy in einen kleinen Nachtclubprinzen verwandeln können, der sowohl singen als auch tanzen kann!

Konventionen für die Verwendung von HOCs

• Bei der Verwendung HOC gibt es einige Konventionen:
• Übergeben irrelevanter Props an die gepackte Komponente (Übergeben von Props, die für ihren spezifischen Inhalt irrelevant sind);
• Schrittweise Kombination (Vermeidung serieller Aufrufe verschiedener HOC-Formen);
• Enthält den Anzeigenamen für Debugzwecke (jeder HOC sollte einen Anzeigenamen haben, der den Regeln entspricht);
• Verwenden Sie in der render keine Komponenten höherer Ordnung (bei jedem Rendern gibt die Komponente höherer Ordnung eine neue Komponente zurück, was sich auf die Diff-Leistung auswirkt).
• Statische Methoden müssen kopiert werden (die neue Komponente, die von der höheren Ebene zurückgegeben wird, enthält nicht die statischen Methoden der ursprünglichen Komponente);
• Vermeiden Sie die Verwendung von ref (ref wird nicht übergeben);

Vor- und Nachteile von HOC

An dieser Stelle können wir die Vorteile von高階組件(HOC) zusammenfassen:

• HOC ist eine reine Funktion, die einfach zu verwenden und zu warten ist;
• Da HOC eine reine Funktion ist, unterstützt es außerdem die Übergabe mehrerer Parameter, was seinen Anwendungsbereich erweitert.
• HOC gibt eine Komponente zurück, die mit hoher Flexibilität kombiniert und verschachtelt werden kann;

Natürlich hat HOC auch einige Probleme:

• Wenn mehrere HOC verschachtelt sind, ist es unmöglich, direkt zu bestimmen, welcher HOC für die Übergabe props der untergeordneten Komponente verantwortlich ist.
• Wenn übergeordnete und untergeordnete Komponenten props mit demselben Namen haben, überschreibt die übergeordnete Komponente die props der untergeordneten Komponente mit demselben Namen und react meldet keinen Fehler, sodass Entwickler sich dessen weniger bewusst sind.
• Jeder HOC gibt eine neue Komponente zurück, wodurch viele nutzlose Komponenten generiert und die Komponentenhierarchie vertieft wird, was die Fehlerbehebung erschwert.

修飾器und高階組件gehören zum selben Muster und werden hier nicht besprochen.

Render-Requisiten

Render Props ist ein sehr flexibles und wiederverwendbares Muster. Es kann bestimmte Verhaltensweisen oder Funktionen in eine Komponente einkapseln und sie anderen Komponenten zur Verwendung bereitstellen, indem es ihnen diese Fähigkeiten verleiht.

Der Begriff „Render-Prop“ bezieht sich auf eine Technik zum Teilen von Code zwischen React-Komponenten unter Verwendung eines Props, dessen Wert eine Funktion ist.

Dies ist die offizielle Definition von Render Props in React , die sich wie folgt übersetzen lässt: „ Render Props sind eine Technologie zum Implementieren von Code-Sharing zwischen React Components . props einer Komponente enthalten eine Eigenschaft vom function , props die Komponente aufrufen kann, um die interne Rendering-Logik der Komponente zu implementieren.“

Offizielles Beispiel:

<DataProvider render={(data) => <h1>Hallo {data.target}</h1>} />

Wie oben gezeigt, verfügt die DataProvider Komponente über eine props Eigenschaft namens render (sie kann auch anders genannt werden). Diese Eigenschaft ist eine Funktion, und diese Funktion gibt ein React Element zurück. Das Rendering wird durch Aufrufen dieser Funktion innerhalb der Komponente abgeschlossen, daher verwendet diese Komponente render props Technologie.

Die Leser fragen sich vielleicht: „Warum müssen wir props -Attribut aufrufen, um ein internes Rendering der Komponente zu erreichen, anstatt das Rendering direkt in der Komponente abzuschließen?“ Um die offizielle Antwort von React zu zitieren: render props ist keine Fähigkeit, die jeder React Entwickler beherrschen muss, und Sie werden diese Methode vielleicht nie verwenden, aber ihre Existenz bietet Entwicklern eine zusätzliche Option, wenn sie über die gemeinsame Nutzung von Komponentencode nachdenken.

Render Props Nutzungsszenarien

Bei der Projektentwicklung müssen wir möglicherweise häufig Popup-Fenster verwenden. Die Benutzeroberfläche des Popup-Fensters kann unterschiedlich sein, aber die Funktionen sind ähnlich, d.打開und關閉. Nehmen wir antd als Beispiel:

importiere { Modal, Button } von "antd"
Klasse App erweitert React.Component {
  Zustand = { sichtbar: falsch }

  // Anzeige und Ausblenden des Popup-Fensters steuern toggleModal = (visible) => {
    this.setState({ sichtbar })
  };

  handleOk = (e) => {
    // Mach etwas this.setState({ visible: false })
  }

  rendern() {
    const { sichtbar } = dieser.Zustand
    zurückkehren (
      <div>
        <Button onClick={this.toggleModal.bind(this, true)}>Öffnen</Button>
        <Modal
          Titel="Einfaches Modal"
          sichtbar={sichtbar}
          beiOk={this.handleOk}
          beiAbbrechen={this.toggleModal.bind(this, false)}
        >
          <p>Einige Inhalte...</p>
        </Modal>
      </div>
    )
  }
}

Das Obige ist das einfachste Beispiel für die Verwendung von Model . Auch bei einfacher Verwendung müssen wir noch auf den Anzeigestatus achten und die Umschaltmethode implementieren. Entwickler möchten sich aber eigentlich nur auf onOk im Zusammenhang mit der Geschäftslogik konzentrieren. Die ideale Verwendungsweise sollte folgendermaßen aussehen:

<MeinModal>
  <Button>Öffnen</Button>
  <Modal title="Einfaches Modal" onOk={this.handleOk}>
    <p>Einige Inhalte...</p>
  </Modal>
</MyModal>

Die obige Verwendung kann durch render props erreicht werden:

importiere { Modal, Button } von "antd"
Klasse MyModal erweitert React.Component {
  Zustand = { ein: falsch }

  umschalten = () => {
    dies.setState({
      am: !dieser.zustand.am
    })
  }

  renderButton = (Requisiten) => <Button {...Requisiten} onClick={this.toggle} />

  renderModal = ({ onOK, ...rest }) => (
    <Modal
      {...ausruhen}
      sichtbar={this.state.on}
      beiOk={() => {
        beiOK && beiOK()
        dies.umschalten()
      }}
      beiAbbrechen={this.toggle}
    />
  )

  rendern() {
    gib diese.Eigenschaften.Kinder zurück({
      Schaltfläche: this.renderButton,
      Modal: dieses.renderModal
    })
  }
}

Auf diese Weise haben wir ein Modal mit Status und Grundfunktionen fertiggestellt. Wenn wir dieses Modal auf anderen Seiten verwenden, müssen wir uns nur auf die spezifische Geschäftslogik konzentrieren.

Wie oben zu sehen ist, sind render props eine echte React Komponente und nicht nur eine Funktion, die eine Komponente wie HOC zurückgeben kann. Dies bedeutet auch, dass die Verwendung render props keine hierarchischen Verschachtelungsprobleme der Komponenten wie HOC verursacht und Sie sich keine Sorgen über das Abdeckungsproblem machen müssen, das durch Namenskonflikte bei props verursacht wird.

Einschränkungen bei der Verwendung render props

箭頭函數sollten in render props vermieden werden, da sie die Leistung beeinträchtigen können.

Zum Beispiel:

// Schlechtes Beispiel class MouseTracker extends React.Component {
  rendern() {
    zurückkehren (
      <Maus rendern={Maus => (
        <Katze Maus={Maus} />
      )}/>
    )
  }
}

Dies ist keine gute Schreibweise, da die render möglicherweise mehrmals gerendert wird. Die Verwendung箭頭函數führt dazu, dass der an render übergebene Wert bei jedem Rendern unterschiedlich ist, aber tatsächlich gibt es keinen Unterschied, was zu Leistungsproblemen führt.

Eine bessere Schreibweise wäre es, die an render übergebene Funktion als Instanzmethode zu definieren, sodass auch bei mehrmaligem Rendern immer dieselbe Funktion gebunden ist.

// Gutes Beispiel Klasse MouseTracker erweitert React.Component {
  renderCat(Maus) {
  	zurück <Katze Maus={Maus} />
  }

  rendern() {
    zurückkehren (
		  <Maus rendern={this.renderTheCat} />
    )
  }
}

Vor- und Nachteile von render props

Vorteil

• Die Props-Namen können verändert werden und es erfolgt kein gegenseitiges Überschreiben;
• Machen Sie die Quelle der Requisiten deutlich.
• Es wird keine mehrschichtige Verschachtelung von Komponenten geben;

Mangel

• Die Schrift ist umständlich;
• Auf Daten kann außerhalb einer return -Anweisung nicht zugegriffen werden.
• Es ist einfach, verschachtelte Funktionsrückrufe zu generieren.

Der folgende Code:

const MeineKomponente = () => {
  zurückkehren (
    <Maus>
      {({ x, y }) => (
        <Seite>
          {({ x: SeiteX, y: SeiteY }) => (
            <Verbindung>
              {({ api }) => {
                // huch
              }}
            </Verbindung>
          )}
        </Seite>
      )}
    </Maus>
  )
}

Haken

Der Kern von React sind Komponenten. Daher hat sich React der Optimierung und Verbesserung der Deklaration von Komponenten verschrieben. Von den frühesten類組件bis hin zu函數組件hat jede ihre eigenen Vor- und Nachteile.類組件können uns einen vollständigen Lebenszyklus und Status bereitstellen, sind aber sehr umständlich zu schreiben. Obwohl函數組件sehr prägnant und leicht zu schreiben sind, unterliegen sie der Einschränkung, dass sie reine Funktionen sein müssen, keine Status enthalten dürfen und keine Lebenszyklen unterstützen. Daher können類組件函數組件nicht ersetzen.

Das React -Team war der Ansicht, dass sich Komponenten am besten mit Funktionen und nicht mit Klassen schreiben lassen, und so entstanden React Hooks .

Der Designzweck von React Hooks besteht darin, die Funktionskomponente zu verbessern, sodass eine voll funktionsfähige Komponente geschrieben werden kann, ohne überhaupt „Klassen“ zu verwenden.

Warum sind類組件„sperrig“? Lassen Sie uns dies anhand eines offiziellen React Beispiels veranschaulichen:

importiere React, {Komponente} von "react"

exportiere Standardklasse Button erweitert Komponente {
  Konstruktor() {
    super()
    this.state = { buttonText: "Klicken Sie mich bitte an" }
    dies.handleClick = dies.handleClick.bind(dies)
  }
  handleKlick() {
    dies.setState(() => {
      return { buttonText: "Danke, wurde geklickt!" }
    })
  }
  rendern() {
    const { buttonText } = dieser.Zustand
    zurückgeben <button onClick={this.handleClick}>{buttonText}</button>
  }
}

Oben ist eine einfache Schaltflächenkomponente, die den grundlegendsten Status und die einfachste Klickmethode enthält. Der Status ändert sich nach dem Klicken auf die Schaltfläche.

Dies ist eine sehr einfache Funktionskomponente, für deren Implementierung jedoch viel Code erforderlich ist. Da函數組件keine Zustände enthalten, können wir函數組件nicht verwenden, um eine Komponente mit den oben genannten Funktionen zu deklarieren. Aber wir können Hook verwenden, um dies zu erreichen:

importiere React, { useState } von "react"

Standardfunktion Button() exportieren {
  const [buttonText, setButtonText] = useState("Klicken Sie mich bitte an")

  Funktion handleClick() {
    return setButtonText("Danke, wurde angeklickt!")
  }

  zurückgeben <button onClick={handleClick}>{buttonText}</button>
}

Im Vergleich dazu ist Hook leichter und behält seinen eigenen Status bei, während es sich in der Nähe von函數組件befindet.

Im obigen Beispiel wird der erste Hook useState() eingeführt. Darüber hinaus stellt React offiziell Hooks wie useEffect() , useContext() und useReducer() bereit. Einzelheiten zu bestimmten Hooks und ihrer Verwendung finden Sie auf der offiziellen Website.

Die Flexibilität von Hook liegt auch darin, dass wir zusätzlich zu den offiziellen Basis-Hooks diese Basis-Hooks auch zum Kapseln und Anpassen von Hooks verwenden können, wodurch eine einfachere Wiederverwendung von Code erreicht wird.

Vor- und Nachteile von Haken

Vorteil

• Einfachere Wiederverwendung von Code;
• Sauberer Code-Stil;
• Weniger Code;

Mangel

• Der Status ist nicht synchronisiert (Funktionen werden unabhängig ausgeführt, jede Funktion hat einen unabhängigen Bereich)
• useEffect muss sinnvoller eingesetzt werden
• Geringe Granularität, viele hook müssen für komplexe Logik abstrahiert werden

Zusammenfassen

Abgesehen davon, dass Mixin aufgrund seiner eigenen offensichtlichen Mängel etwas zurückliegt, gibt es keine最佳方案für高階組件, render props und react hook . Sie alle haben Vor- und Nachteile. Auch wenn die beliebtesten react hook hook kurz und klar aussehen, entspricht im tatsächlichen Geschäftsleben normalerweise eine Geschäftsfunktion mehreren hook . Wenn sich das Geschäft also ändert, müssen Änderungen an mehreren hook verwaltet werden. Im Vergleich zur Verwaltung einer class kann der geistige Aufwand erheblich steigen.最佳方案ist die, die zu Ihrem Unternehmen passt.

Referenzdokumente:

Verwenden von React-Mixins

Als schädlich eingestufte Mixins

Komponenten höherer Ordnung

Render-Requisiten

React Miscellanea: Render Props und ihre Anwendungsfälle

Einführung in Hooks

Dies ist das Ende dieses Artikels über die Best Practices für die gemeinsame Nutzung von React-Code. Weitere relevante Inhalte zur gemeinsamen Nutzung von React-Code finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!