In einer React- Funktionskomponente , die den besseren Ansatz zum Festlegen von Standard-Requisiten darstellt, verwenden Component.defaultProps
oder 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>
)
javascript
reactjs
ecmascript-6
Iago Dahlem
quelle
quelle
Antworten:
defaultProps
auf funktionale Komponenten wird irgendwann veraltet sein (laut Dan Abramov, einem der Kernteams) . Für die Zukunftssicherheit lohnt es sich daher, Standardparameter zu verwenden.quelle
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.
quelle
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?defaultProps
wird vor der Überprüfung ausgewertetpropTypes
. Wie in der Antwort von @fforw erwähnt, gelten die Standardeinstellungen für die Destrukturierung hier nicht.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> }
quelle
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> )
quelle
Vielleicht fragen Sie auch, warum Sie nicht etw wie den folgenden Code verwenden,
props || value
anstattdefaultProps
: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 habenprops
und die Steuerung mit dem||
Operator dazu führen kann, dass Ihr Code hässlich aussiehtquelle