web-dev-qa-db-fra.com

Réaction des accessoires par défaut du composant fonctionnel par rapport aux paramètres par défaut

Dans un composant React functional, la meilleure approche pour définir les accessoires par défaut, en utilisant Component.defaultProps ou en utilisant les paramètres default sur la définition de la fonction, est la suivante:

Accessoires par défaut:

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

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

Paramètres par défaut:

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

En général (ES6), la deuxième façon est meilleure.

En particulier (dans le contexte React), le premier est préférable car il s’agit d’une phase principale du cycle de vie des composants, à savoir la phase d’initialisation.

Rappelez-vous, ReactJS a été inventé avant ES6.

20
Abdennour TOUMI

defaultProps sur les composants fonctionnels sera sera éventuellement obsolète (selon Dan Abramov, l'un des membres de l'équipe principale) , il est donc intéressant d'utiliser des paramètres par défaut.

1
Tom

Shameless Plug ici, je suis l'auteur de with-default-props.

Si vous êtes un utilisateur de TypeScript, with-default-props peut vous aider, qui utilise une fonction d'ordre supérieur pour fournir une définition de composant correcte avec defaultProps.

Par exemple.

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

Le premier problème peut entraîner des problèmes de performances difficiles à déboguer, en particulier si vous utilisez Redux.

Si vous utilisez des objets, des listes ou des fonctions, il s'agira de nouveaux objets à chaque rendu. Cela peut être mauvais si vous avez des composants complexes qui vérifient leur identité pour voir si le rendu doit être effectué.

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

Maintenant, cela fonctionne bien, mais si vous avez des composants et des états plus complexes, tels que des composants connectés réagir-reduquer avec une connexion à une base de données et/ou des hooksffffffffffet, et un état de composant, cela peut entraîner beaucoup de rerending.

Il est généralement préférable d’avoir des objets prop par défaut créés séparément, par exemple.

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

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

ou

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

Pour supprimer une certaine confusion ici:

La syntaxe "Paramètres par défaut" n'est pas valide.

Le seul paramètre par défaut ES6 serait serait applicable à distance aux composants fonctionnels de React serait 

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

Cela initialise un argument undefined props qui ne se produit jamais, car React fournira un objet null props lorsque vous ne définissez aucun prop.

Si cela arriverait, cela ne ferait que substituer tous les accessoires si aucun n’est donné, ce qui n’est absolument pas ce que font les accessoires par défaut de React, c’est-à-dire que les accessoires par défaut sont fournis de manière indépendante.

0
fforw