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

Question

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

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

Answer 1

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

Answer 2

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.

Answer 3

On peut d'abord provoquer certains difficiles à déboguer des problèmes de performances, surtout si vous utilisez redux.

Si vous utilisez des objets ou des listes ou des fonctions, celles-ci seront de nouveaux objets sur chaque rendu. Cela peut être mauvais si vous avez des composants complexes, vérifier que le composant idenitity pour voir si nouveau rendu doit être fait.

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

Maintenant, ce qui fonctionne parfaitement, mais si vous avez plus complexe de la composante et de l'état, tels que réagir-redux composants connectés avec connexion de base de données et/ou de réagir useffect crochets, et l'état des composants, ce qui peut causer beaucoup de rerending.

Il est généralement préférable d'avoir par défaut prop objets 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>
)

Answer 4

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

Si vous êtes un utilisateur de TypeScript, with-default-props peut vous aider, car il utilise une fonction d'ordre supérieur pour fournir la définition de composant correcte avec les propriétés defaultProps fournies.

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

Answer 5

Même peut-être demandez-vous pourquoi ne pas utiliser sth comme ci-dessous avec props || value au lieu de 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')
)
 

Mais souvenez-vous que defaultProps rend le code plus lisible, en particulier si vous avez plus de props et que vous les contrôlez avec un opérateur || pourrait rendre votre code plus laid.