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

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>
)    

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

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.

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>
}

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>
)

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