Quelles sont les différentes manières de déclarer les composants de réaction ?

Comment déclarer les composants React : 1. Composants sans état définis dans le style fonctionnel ; 2. Composants définis de manière native es5 [React.createClass] 3. Composants définis sous le formulaire es6 [étend React.Component] .

Méthode de déclaration du composant réactif :

Composant fonctionnel apatride

La création de composants fonctionnels sans état est disponible depuis React 0.14. Il est utilisé pour créer des composants d'affichage purs, qui sont uniquement responsables de l'affichage en fonction des accessoires entrants et n'impliquent pas d'opérations d'état. Composants fonctionnels apatrides spécifiques, a déclaré le responsable :

Dans la plupart des codes React, la plupart des composants sont écrits comme des composants sans état, qui peuvent être intégrés dans d'autres composants par une simple combinaison

Ce modèle de conception est préconisé ; en combinant plusieurs applications simples en une seule grande application.

Le composant fonctionnel sans état est formellement représenté comme une classe de composant avec une seule méthode de rendu, qui est créée sous la forme d'une fonction ou d'une fonction fléchée ES6, et le composant est sans état. Le formulaire de création spécifique est le suivant :

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

Le formulaire de création de composants sans état rend le code plus lisible et réduit beaucoup de code redondant, le simplifiant à une seule méthode de rendu, ce qui améliore considérablement l'efficacité de l'écriture. a En plus de la commodité des composants, les composants sans état présentent également les fonctionnalités importantes suivantes :

• Le composant ne sera pas instancié et les performances globales de rendu sont améliorées

  Étant donné que le composant est simplifié en fonction de la méthode de rendu, puisqu'il s'agit d'un composant sans état, le composant sans état ne sera pas en cours d'instanciation du composant et le processus de non-instanciation n'a pas besoin d'allouer un excès de mémoire, améliorant ainsi les performances. .obtenir une certaine amélioration.

• Les composants ne peuvent pas accéder à cet objet

  Les composants sans état n'ont pas de processus d'instanciation, ils ne peuvent donc pas accéder aux objets du composant this, tels que : this.ref, this.state Aucun puisse y accéder. Si vous souhaitez y accéder, vous ne pouvez pas utiliser ce formulaire pour créer des composants

• Les composants ne peuvent pas accéder aux méthodes de cycle de vie

  Car les composants sans état ne nécessitent pas de gestion du cycle de vie et de l'état des composants Gestion, donc lorsque l'implémentation sous-jacente de cette forme de composant n'implémente pas la méthode du cycle de vie du composant. Par conséquent, les composants sans état ne peuvent pas participer aux différentes gestions du cycle de vie des composants.

• Les composants apatrides ne peuvent accéder qu'aux accessoires d'entrée. Les mêmes accessoires obtiendront les mêmes résultats de rendu sans effets secondaires

  Les composants apatrides sont encouragés dans les grands projets. Essayez d'utiliser une écriture simple. méthodes pour diviser les composants initialement énormes.À l'avenir, React effectuera également une série d'optimisations pour les composants sans état, telles que des vérifications inutiles et l'allocation de mémoire, donc dans la mesure du possible, essayez d'utiliser des composants sans état.

<code><strong>2、React.createClass</strong>2. React.createClass

React.createClass est le moyen de créer des composants initialement recommandés par React. Il s'agit d'un composant React implémenté dans le JavaScript natif d'ES5. Sa forme est la suivante :

var InputControlES5 = React.createClass({
    propTypes: {//定义传入props中的属性各种类型
        initialValue: React.PropTypes.string
    },
    defaultProps: { //组件默认的props对象
        initialValue: ''
    },
    // 设置 initial state
    getInitialState: function() {//组件相关的状态对象
        return {
            text: this.props.initialValue || 'placeholder'
        };
    },
    handleChange: function(event) {
        this.setState({ //this represents react component instance
            text: event.target.value
        });
    },
    render: function() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        );
    }
});
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: &#39;&#39;
};

React.createClass Par rapport aux composants sans état,

et le React.Component qui sera décrit plus loin créent tous deux des composants avec état. et avoir accès aux méthodes de cycle de vie du composant. Cependant, avec le développement de React, des problèmes avec le formulaire React.createClass lui-même ont été révélés :

React.createClass auto-liera les méthodes de fonction (contrairement à React.Component qui ne lie que les fonctions qui doivent être concernées) , ce qui entraîne une surcharge inutile en termes de performances, augmentant ainsi la probabilité que le code devienne obsolète.

mixins

de React.createClass n'est pas assez naturel et intuitif ; le formulaire React.Component est très adapté aux composants d'ordre supérieur (Higher Order Components--HOC), qui montre des fonctions plus puissantes que les mixins dans un forme plus intuitive, et HOC est du JavaScript pur, il n'y a donc pas lieu de s'inquiéter de leur abandon. Pour HOC, veuillez vous référer à « Composants sans état et composants d'ordre supérieur ».

<strong>3、React.Component</strong>

3. React.Component

React.Component crée des composants React sous la forme d'ES6, qui est actuellement fortement recommandé par React The La manière de créer des composants avec état remplacera éventuellement le formulaire React.createClass ; par rapport à React.createClass, la réutilisation du code peut être mieux réalisée. Remplacez le formulaire React.createClass ci-dessus par le formulaire React.Component comme suit :

class InputControlES6 extends React.Component {
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            text: props.initialValue || 'placeholder'
        };
        // ES6 类中函数必须手动绑定
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }
    render() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange}
               value={this.state.text} />
            </div>
        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: &#39;&#39;
};

Recommandations d'apprentissage associées :

Tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!