Welche reaktionserklärung zu verwenden

Question

Ich bin neu zu reagieren und gesehen folgende Deklaration in wenigen Tutorials.

Ich bin verwirrt, was zu verwenden. Gibt es eine Richtlinie, unter welcher die Differenzsituation zu bevorzugen ist?

Declaration 1

const elem = function() { 
    return <div>Hello World!</div> 
} 

Erklärung 2

const elem2 = <div>Hello World!</div> 

Declaration 3

class App extends Component { 
render() { 
    return (
     <div>Hello World!</div> 
    ); 
    } 
} 

Answer 1

Anbetracht

class App extends Component { 
render() { 
    return (
     <div>Hello World!</div> 
    ); 
    } 
} 

ist eine React-Komponente und sollte daher verwendet werden, wenn Sie separate Komponenten für verschiedene Funktionalitäten für Ihre Anwendung erstellen möchten, die Zustände und Requisiten enthalten, die übergeben werden.

Per

const elem2 = <div>Hello World!</div> 

es verwendet werden soll, wenn die JSX Elemente keine zusätzliche Logik enthalten und contian statische Inhalte

const elem = function() { 
    return <div>Hello World!</div> 
} 

sollte idealerweise verwendet werden, wenn Sie bestimmte Änderung auf die ausgeführt werden soll Daten und zurückgeben das JSX-Element, auch wenn Sie einige bedingte Rückgaben und statuslose retuns durchführen wollen

Answer 2

Sie können immer funktionale Komponente verwenden s, wenn die Komponente besteht nur aus der render Funktion.

Das heißt, wenn Ihre Komponente die folgende Form besitzt:

class MyComponent extends React.Component { 
    render() { 
     ... do something ... 
    } 
} 

dann können Sie es ersetzen mit

const MyComponent = (props, context) => { 
    ... do something ... 
} 

Funktionskomponenten nicht state haben können (sie staatenlos sind) und Sie können die nicht zugreifen Komponentenlebenszyklus (z. B. componentDidMount). Sie können auch kein reines Rendering mit ihnen verwenden, da Sie shouldComponentUpdate nicht überschreiben können.

Sie sind die reinste Form einer Komponente, sie konvertieren Eigenschaften in UI und haben keine anderen Nebenwirkungen.

Ich würde empfehlen, sie so viel wie möglich zu verwenden, weil sie einen guten Programmierstil erzwingen (besonders mit Redux-Architektur), aber Sie werden nicht in der Lage sein, sie jedes Mal zu verwenden. Je "intelligenter" eine Komponente ist, desto weniger wird es möglich sein, eine funktionale Komponente zu verwenden (siehe Smart vs Dumb components).

Sie sind besonders nützlich, wenn Sie Higher Order Components definieren.

Beachten Sie auch, dass Sie oft alle Ansätze kombinieren, betrachten

render() { 
    const renderContents =() => { 
     return (
      <div className="contents"> 
       this.props.children 
      </div> 
     ); 
    } 

    return (
     <div> 
      {renderContents} 
     </div> 
    ); 
} 

Sie können render eine „Komponente“ in andere Komponente definieren. Wie Sie sehen können, gibt es keinen Unterschied zwischen einer Funktion und einer funktionalen Komponente. Gleiches gilt für Konstanten. Die Definition einer Konstanten <div /> unterscheidet sich nicht von der Definition einer konstanten Zeichenkette oder einer Zahl. Sie müssen es nicht in eine Komponente/Funktion einbinden. Sie können auch Folgendes tun:

const contents = (() => { 
    if (props.children.count === 0) { 
     return null; 
    } 

    return (
     <div>{props.children}</div> 
    ); 
})(); 

Dies ist eine sofort aufgerufene Funktion.