web-dev-qa-db-fra.com

ReactJS différence entre état et apatride

J'essaie de comprendre la différence exacte entre les composants avec état et sans état de React. Ok, les composants sans état font juste quelque chose, mais ne se souviennent de rien, tandis que les composants avec état peuvent faire la même chose, mais ils se souviennent de choses dans this.state. Voilà la théorie.

Mais maintenant, en vérifiant comment montrer cela en utilisant du code, j'ai un peu de mal à faire la différence. Ai-je raison avec les deux exemples suivants? La seule différence est vraiment la définition de la fonction getInitialState.

Exemple d'un composant sans état:

var React = require('react');

var Header = React.createClass({
    render: function() {
        return(
            <img src={'mypicture.png'} />
        );
    }
});

module.exports = Header;

Exemple d'un composant avec état:

var React = require('react');

var Header = React.createClass({

    getInitialState: function() {
        return {
            someVariable: "I remember something"
        };
    },

    render: function() {
        return(
            <img src={'mypicture.png'} />
        );
    }
});

module.exports = Header;
reactjscomponentsstatelessstateful
31
Socrates

Oui, c'est en quelque sorte la différence. Sauf avec le composant stateful, vous pouvez également changer l'état, en utilisant this.setState par exemple:

var React = require('react');

var Header = React.createClass({

    getInitialState: function() {
        return {
            imageSource: "mypicture.png"
        };
    },

    changeImage: function() {

        this.setState({imageSource: "differentpicture.png"});
    },

    render: function() {
        return(
            <img src={this.state.imageSource} onClick={this.changeImage.bind(this)} />
        );
    }
});

module.exports = Header;

Ainsi, dans l'exemple ci-dessus, changeImagegère l'état du composant (ce qui entraînerait également le rendu de tous les composants enfants/dépendants).

Quelque part dans l'application, vous devez lier des données ou vous souvenir de choses. Les composants sans état sont stupides (et c'est bien), ils ne peuvent pas se souvenir et ils ne peuvent pas donner de contexte à d'autres parties de l'interface utilisateur. Les composants avec état fournissent le contexte nécessaire colle.

D'un autre côté, les composants sans état obtiennent simplement le contexte passé (généralement via this.props:

var React = require('react');

var Header = React.createClass({
    render: function() {
        return(
            <img src={this.props.imageSource} />
        );
    }
});

ReactDOM.render(<Header imageSource="myImage.png"/>, document.body);

Dans l'exemple ci-dessus, vous pouvez voir que pendant le render, imageSource est passé en tant qu'attribut et est ensuite ajouté aux composants sans état this.props objet.

34
Davin Tryon

Composant fonctionnel ou composant sans état

  1. Le composant fonctionnel est comme une fonction pure en JavaScript.
  2. Le composant fonctionnel est également appelé composant sans état.
  3. Le composant fonctionnel reçoit uniquement les accessoires du composant parent et vous renvoie des éléments JSX.
  4. Le composant fonctionnel ne joue avec aucune méthode de cycle de vie de React et ne joue pas avec l'état du composant.

Composant de classe ou composant d'état

  1. Le composant de classe React est appelé en tant que composant avec état.
  2. Le composant avec état joue avec toutes les méthodes de cycle de vie de React.
  3. Ce composant modifiera l'état.

Ce sont les principales différences

Si vous avez des connaissances sur la fonction pure en JavaScript, vous pouvez facilement comprendre le composant fonctionnel ou sans état.

6
Hemadri Dasari

Dans une définition simple, il peut être expliqué comme

Si le comportement d'un composant dépend de l'état du composant, il peut être qualifié de composant avec état et si le comportement est indépendant de son état, il peut être un composant sans état.

Lorsqu'un élément est "avec état", il s'agit d'un point central qui stocke en mémoire des informations sur l'état de l'application/du composant. Quand quelque chose est "apatride", il calcule son état interne mais ne le mute jamais directement.

Les composants sans état sont parfois appelés composants muets

Le principal avantage sans état par rapport au composant avec état est l'évolutivité et la réutilisabilité.

Vous pouvez maintenant vérifier les exemples de composants dans @Davin Tryon Answer

4
Samuel J Mathew