React Bases absolues de la création de composants réutilisables


Exemple

Composants et accessoires

Comme React ne concerne que le point de vue d'une application, l'essentiel du développement dans React sera la création de composants. Un composant représente une partie de la vue de votre application. "Props" sont simplement les attributs utilisés sur un nœud JSX (par exemple, <SomeComponent someProp="some prop's value" /> ), et sont la principale manière dont notre application interagit avec nos composants. Dans l'extrait ci-dessus, à l'intérieur de SomeComponent, nous aurions accès à this.props , dont la valeur serait l'objet {someProp: "some prop's value"} .

Il peut être utile de considérer les composants de React comme des fonctions simples: ils prennent en compte les «accessoires» et produisent une sortie sous forme de balisage. Beaucoup de composants simples vont plus loin en se faisant des "fonctions pures", ce qui signifie qu'ils ne génèrent pas d'effets secondaires et sont idempotents (étant donné un ensemble d'entrées, le composant produira toujours la même sortie). Cet objectif peut être formellement appliqué en créant des composants en tant que fonctions, plutôt que des "classes". Il existe trois manières de créer un composant React:

  • Composants fonctionnels ("sans état")
const FirstComponent = props => (
    <div>{props.content}</div>
);
  • React.createClass ()
const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});
  • Classes ES2015
class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

Ces composants sont utilisés de la même manière:

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

Les exemples ci-dessus produiront tous un balisage identique.

Les composants fonctionnels ne peuvent pas avoir "d'état" en eux. Donc, si votre composant doit avoir un état, optez pour des composants basés sur des classes. Reportez-vous à la section Création de composants pour plus d'informations.

En guise de dernière remarque, les accessoires de réaction sont immuables une fois qu'ils ont été passés, ce qui signifie qu'ils ne peuvent pas être modifiés à partir d'un composant. Si le parent d'un composant modifie la valeur d'un accessoire, React gère le remplacement des anciens accessoires par le nouveau, le composant se répète en utilisant les nouvelles valeurs.

Reportez-vous à la section Réaction et réutilisation des composants pour des plongées plus approfondies dans la relation entre les accessoires et les composants.