webentwicklung-frage-antwort-db.com.de

Reagieren Sie die Standard-Requisiten für Funktionskomponenten im Vergleich zu Standardparametern

In einer React Funktionskomponente ist dies der bessere Ansatz, Standard-Requisiten mithilfe von Component.defaultProps oder mithilfe der Standardparameter in der Funktionsdefinition festzulegen.

Standard Requisiten:

const Component = ({ prop1, prop2 }) => (
  <div></div>
)

Component.defaultProps = {
  prop1: false,
  prop2: 'My Prop',
}

Standardparameter:

const Component = ({ prop1 = false, prop2 = 'My Prop' }) => (
  <div></div>
)    
19
Iago Dahlem

Im Allgemeinen (ES6) ist der zweite Weg besser.

Speziell (im React-Kontext) ist die erste Methode besser, da sie eine Hauptphase im Komponentenlebenszyklus ist, nämlich die Initialisierungsphase.

Denken Sie daran, dass ReactJS vor ES6 erfunden wurde.

20
Abdennour TOUMI

defaultProps für funktionale Komponenten wird möglicherweise nicht mehr empfohlen (gemäß Dan Abramov, einem Mitglied des Kernteams , daher lohnt es sich zur Zukunftssicherung, Standardparameter zu verwenden.

1
Tom

Shameless Plug hier, ich bin der Autor von With-Default-Requisiten.

Wenn Sie ein TypeScript-Benutzer sind, kann mit-Standard-Requisiten hilfreich sein. Dabei wird die Funktion höherer Ordnung verwendet, um die korrekte Komponentendefinition mit den angegebenen defaultProps bereitzustellen.

Z.B.

import { withDefaultProps } from 'with-default-props'

type Props = {
    text: string;
    onClick: () => void;
};

function Component(props: Props) {
    return <div onClick={props.onClick}>{props.text}</div>;
}

// `onClick` is optional now.
const Wrapped = withDefaultProps(Component, { onClick: () => {} })


function App1() {
    // ✅
    return <Wrapped text="hello"></Wrapped>
}

function App2() {
    // ✅
    return <Wrapped text="hello" onClick={() => {}}></Wrapped>
}

function App3() {
    // ❌
    // Error: `text` is missing!
    return <Wrapped onClick={() => {}}></Wrapped>
}
0
Zen

Erstens kann es zu schwer zu debuggenden Leistungsproblemen kommen, insbesondere wenn Sie Redux verwenden.

Wenn Sie Objekte oder Listen oder Funktionen verwenden, sind dies bei jedem Rendern neue Objekte. Dies kann schlecht sein, wenn Sie über komplexe Komponenten verfügen, die die Komponentenidentität überprüfen, um festzustellen, ob ein erneutes Rendern erfolgen soll.

const Component = ({ prop1 = {my:'prop'}, prop2 = ['My Prop'], prop3 = ()=>{} }) => {(
  <div>Hello</div>
)}

Das funktioniert nun gut, aber wenn Sie komplexere Komponenten und Zustände haben, z. B. Komponenten, die mit einer Datenbankverbindung verbunden sind, und/oder Hooks, die sich auf die Reaktion auswirken, und den Komponentenzustand, kann dies eine Menge erneutes Rendern verursachen.

Es ist im Allgemeinen besser, Standard-Requisitenobjekte separat erstellen zu lassen, z.

const Component = ({prop1, prop2, prop3 }) => (
  <div>Hello</div>
)

Component.defaultProps = {
  prop1: {my:'prop'},
  prop2: ['My Prop'],
  prop3: ()=>{}
}

oder

const defaultProps = {
  prop1: {my:'prop'},
  prop2: ['My Prop'],
  prop3: ()=>{}
}
const Component = ({
  prop1 = defaultProps.prop1,
  prop2 = defaultProps.prop2
  prop3 = defaultProps.prop3
 }) => (
  <div>Hello</div>
)
0
Jkarttunen

Um hier einige Verwirrungen zu beseitigen:

Die Syntax "Standardparameter" ist ungültig.

Der einzige Weg, auf dem der ES6-Standardparameter wäre wäre für React-Funktionskomponenten remote anwendbar 

const Component = (props = { prop : 'Don't ever do this' }) {
    ...
}

Dies würde ein undefined props-Argument initialisieren, das niemals vorkommt, da React ein null props-Objekt bereitstellt, wenn Sie keine Requisiten definieren.

Wenn es passieren würde, würde es nur alle Requisiten ersetzen, wenn keine gegeben wurden. Dies ist absolut nicht das, was React Default Requisiten tun, d.

0
fforw