Il existe plusieurs façons de déclarer des composants de réaction

Il existe trois façons de déclarer les composants React : 1. Utilisez le style fonctionnel pour définir des composants sans état ; 2. Utilisez la méthode "React.createClass()" pour définir les composants ; utilisez le formulaire ES6 pour définir les composants.

L'environnement d'exploitation de ce tutoriel : système Windows 7, React version 17.0.1, ordinateur Dell G3.

La façon dont React déclare (crée) les composants :

Après le lancement de React, il existe trois façons de définir les composants de React pour différentes raisons, toutes avec le même objectif 

Les trois manières spécifiques :

 ;

• Définition fonctionnelle des composants sans état

• React.createClass() définit les composants

• React.Component() définit les composants

Bien qu'il existe trois façons de définir les composants de réaction, ces trois façons de définir les composants sont Quelle est la différence ? En d’autres termes, pourquoi les définitions correspondantes apparaissent-elles ? Présentons-le brièvement ci-dessous.

Composants fonctionnels sans état

La création de composants fonctionnels sans état a commencé à apparaître dans la version 0.14 de React. Il est utilisé pour créer des composants d'affichage purs, qui sont uniquement responsables de l'affichage basé sur les 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 construits en d'autres composants par une simple combinaison, par exemple via plusieurs modèles de conception simples, puis fusionnés en un seul ; les applications à grande échelle sont préconisées.

Un composant fonctionnel sans état est formellement représenté comme une classe de composant avec une seule méthode de rendu. Il est créé 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 la commodité d'écriture d'un composant. De plus, les composants sans état ont les caractéristiques notables suivantes :

La forme 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 la lisibilité du code. améliore la commodité d'écriture d'un composant.De plus, les composants sans état ont les fonctionnalités importantes suivantes :

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

  car le composant est rationalisé dans un rendu Il est implémenté. Par la fonction de la méthode. Puisqu'il s'agit d'un composant sans état, le composant sans état ne sera pas en cours d'instanciation du composant. Dans le processus de non-instanciation, il n'est pas nécessaire d'allouer un excès de mémoire, les performances sont donc améliorées. certaine mesure.

• 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. Par exemple, this.ref, this.state, etc. ne sont pas accessibles. 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

  Étant donné que les composants sans état ne nécessitent pas de gestion du cycle de vie des composants ni de gestion de l'état, l'implémentation sous-jacente de cette forme de composant est donc Les méthodes de cycle de vie du composant ne sont pas implémentées. 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 à diviser l'original de la manière la plus simple possible dans les grands projets. Pour les composants énormes. , React effectuera également une série d'optimisations pour les composants sans état à l'avenir, 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.

React.createClass

React.createClass est le moyen de créer des composants recommandé au début de React. Il s'agit d'un composant React implémenté par 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;
};

Par rapport à Stateless. Les composants React.createClass et React.Component qui seront décrits plus loin créent tous deux des composants avec état. Ces composants doivent être instanciés et avoir accès aux méthodes de cycle de vie du composant. Mais avec le développement de React, les problèmes du formulaire React.createClass lui-même sont exposés :

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

• Les mixins de React.createClass ne sont pas assez naturels et intuitifs ; 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 sous une forme plus intuitive. , et HOC est du JavaScript pur, vous n'avez pas à craindre qu'ils soient obsolètes. Pour HOC, veuillez vous référer à « Composants sans état et composants d'ordre supérieur ».

React.Component

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为React.Component形式如下：

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

推荐学习：《react视频教程》

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!