Reagieren Sie auf Standard-Requisiten für Funktionskomponenten und Standardparameter

78

In einer React- Funktionskomponente , die den besseren Ansatz zum Festlegen von Standard-Requisiten darstellt, verwenden Component.defaultPropsoder verwenden Sie die Standardparameter für die Funktionsdefinition:

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>
)    
Iago Dahlem
quelle
3
@AbdennourTOUMI Bitte zerstören Sie nicht die Standard-Initialisierersyntax!
Bergi
Danke @Bergi. keine Ursache! Ich dachte, es ist eine falsche Syntax. Ist es ?
Abdennour TOUMI
3
@AbdennourTOUMI Nein, es ist die Syntax für Standardwerte. Sie haben es in die Objektliteral-Syntax geändert, die bei String- / Booleschen Literalen in Parametern ungültig ist.
Bergi

Antworten:

45

defaultPropsauf funktionale Komponenten wird irgendwann veraltet sein (laut Dan Abramov, einem der Kernteams) . Für die Zukunftssicherheit lohnt es sich daher, Standardparameter zu verwenden.

Tom
quelle
Also, wie sollte es sein?
ValRob
1
Verwenden Sie Standardparameter und nicht "defaultProps", wenn Sie sich um die Wartbarkeit Ihres Projekts kümmern. Jemand hat diese Antwort tatsächlich in meiner eigenen Antwort referenziert
Vadorequest
39

Im Allgemeinen (ES6) ist der zweite Weg besser.

Insbesondere (im Reaktionskontext) ist die erste besser, da es sich um eine Hauptphase im Komponentenlebenszyklus handelt, nämlich die Initialisierungsphase.

Denken Sie daran, ReactJS wurde vor ES6 erfunden.

Abdennour TOUMI
quelle
1
Könnten Sie näher darauf eingehen defaultProps, was es bedeutet, Standardparameter im Kontext von React vorzuziehen? Gibt es etwas Grundlegendes daran, wie sie in React unter der Haube gehandhabt werden, oder wird es eher für die Aufrechterhaltung der Konvention bevorzugt?
Alexander Nied
1
@AlexanderNied defaultPropswird vor der Überprüfung ausgewertet propTypes. Wie in der Antwort von @fforw erwähnt, gelten die Standardeinstellungen für die Destrukturierung hier nicht.
Capi Etheriel
@AlexanderNied und dieser kleine Unterschied ist sehr wichtig für einige komplexere verbundene Komponenten, siehe meine Antwort unten.
Jkarttunen
5
Diese Antwort ist jetzt veraltet, da Standard-Requisiten für Funktionskomponenten möglicherweise veraltet sind (siehe meine Antwort unten).
Tom
2

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

Wenn Sie ein TypeScript-Benutzer sind, können Ihnen With -Default-Requisiten helfen, die Funktionen höherer Ordnung verwenden, um eine 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>
}
Zen
quelle
1

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

Wenn Sie Objekte, Listen oder Funktionen verwenden, sind dies bei jedem Rendern neue Objekte. Dies kann schlecht sein, wenn Sie komplexe Komponenten haben, die die Komponentenidentität überprüfen, um festzustellen, ob ein erneutes Rendern durchgeführt werden sollte.

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

Das funktioniert jetzt einwandfrei. Wenn Sie jedoch komplexere Komponenten und Zustände haben, z. B. mit React-Redux verbundene Komponenten mit Datenbankverbindung und / oder React Useffect-Hooks und Komponentenstatus, kann dies zu erheblichen Wiederholungen führen.

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>
)
Jkarttunen
quelle
1

Vielleicht fragen Sie auch, warum Sie nicht etw wie den folgenden Code verwenden, props || valueanstatt defaultProps:

class SomeComponent extends React.Component {
  render() {
    let data = this.props.data || {foo: 'bar'}
    return (
      <div>rendered</div>
    )
  }
}

// SomeComponent.defaultProps = {
//   data: {foo: 'bar'}
// };

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)

Denken Sie jedoch daran defaultProps, den Code lesbarer zu machen, insbesondere wenn Sie mehr haben propsund die Steuerung mit dem ||Operator dazu führen kann, dass Ihr Code hässlich aussieht

SayJeyHi
quelle