Environ trois façons de créer des composants dans React et leurs différences

Cet article présente principalement les trois façons de créer des composants dans React et leurs différences. Il a une certaine valeur de référence. Examinons-les ensemble

Après le lancement de React, trois définitions sont apparues l'une après l'autre. pour des raisons différentes. Les méthodes des composants React ont le même objectif ; il existe trois méthodes spécifiques :

• Composants sans état définis fonctionnellement

• Méthode native es5 React.createClass Le composant défini

• Le formulaire es6 étend React.Component Le composant défini

Bien qu'il existe trois façons de définir les composants de réaction, alors ces trois Quelle est la différence entre ces deux manières de définir les composants ? 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 souligné 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, cela se fait via plusieurs modèles de conception ; simple puis fusionné dans une grande application est préconisé.

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 <p>Hello {props.name}</p>
}
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, rationalisé. à 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 :

1. est amélioré

Parce 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 instancié dans le processus du composant, sans processus d'instanciation. il n'est pas nécessaire d'allouer de la mémoire supplémentaire, les performances sont donc améliorées dans une certaine mesure.

2. Le composant ne peut pas accéder à l'objet this

Puisqu'il n'y a pas de processus d'instanciation, les composants sans état ne peuvent pas accéder aux objets du composant this, tels que : this. ref, ce .state, etc. n'est pas accessible. Si vous souhaitez y accéder, vous ne pouvez pas utiliser ce formulaire pour créer des composants

3. 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 des composants. et la gestion de l'état, donc lorsque l'implémentation sous-jacente de cette forme de composant n'implémente pas la méthode de 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.

4. Les composants sans état 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 sans état sont encouragés à le faire. Dans les grands projets, essayez. utiliser des méthodes d'écriture simples 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 dénuées de sens et l'allocation de mémoire, donc tant qu'il y en a si possible. , essayez d'utiliser des composants sans état .

React.createClass

`React.createClass` est la première méthode recommandée pour créer des composants dans React. Il s'agit d'un composant React implémenté dans le langage JavaScript natif d'ES5. 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 (
 <p>
 Type something:
 <input onChange={this.handleChange} value={this.state.text} />
 </p>
 );
 }
});
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: &#39;&#39;
};

Par rapport aux composants sans état, React.createClass et React.Component qui seront décrits plus loin créent tous deux des composants avec état, ces composants sont. d'être instancié et d'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 s'auto-liera aux méthodes de fonction (contrairement à React.Component qui ne lie que le choses dont vous devez vous soucier)) entraîne une surcharge de performances inutile et augmente 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 les mixins sous une forme plus intuitive Des fonctions plus puissantes, et HOC est du pur JavaScript, pas besoin de s'inquiéter de leur abandon.

React.Component

React.Component est utilisé pour créer des composants React sous la forme d'ES6. Il est actuellement fortement recommandé pour React to. create L'approche des composants d'état remplacera à terme le formulaire React.createClass ; par rapport à React.createClass, la réutilisation du code peut être mieux réalisée. Remplacez la forme de React.createClass ci-dessus par la forme de 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 (
 <p>
 Type something:
 <input onChange={this.handleChange}
 value={this.state.text} />
 </p>
 );
 }
}
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: &#39;&#39;
};

La différence entre React.createClass et React .Component

En plus des différents formats grammaticaux de définition des composants dans le code présenté ci-dessus, il existe de nombreuses différences importantes entre les deux. Les principales différences entre les deux sont décrites ci-dessous.

La fonction this est auto-liante

Dans le composant créé par React.createClass, le this de chaque fonction membre est automatiquement lié par Réagissez. Chaque fois que vous l'utilisez, utilisez simplement this.method directement, et cela dans la fonction sera défini correctement.

const Contacts = React.createClass({ 
 handleClick() {
 console.log(this); // React Component instance
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

class Contacts extends React.Component { 
 constructor(props) {
 super(props);
 }
 handleClick() {
 console.log(this); // null
 }
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }

当然，React.Component有三种手动绑定方法：可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrow function来绑定。拿上例的handleClick函数来说，其绑定可以有：

 constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this); //构造函数中绑定
 }

<p onClick={this.handleClick.bind(this)}></p> //使用bind来绑定
   <p onClick={()=>this.handleClick()}></p> //使用arrow function来绑定

组件属性类型propTypes及其默认props属性defaultProps配置不同

React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的

const TodoItem = React.createClass({
 propTypes: { // as an object
 name: React.PropTypes.string
 },
 getDefaultProps(){ // return a object
 return {
 name: '' 
 }
 }
 render(){
 return <p></p>
 }
})

React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。对应上面配置如下：

class TodoItem extends React.Component {
 static propTypes = {//类的静态属性
 name: React.PropTypes.string
 };
 static defaultProps = {//类的静态属性
 name: ''
 };
 ...
}

组件初始状态state的配置不同

React.createClass创建的组件，其状态state是通过getInitialState方法来配置组件相关的状态；

React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样声明的。

const TodoItem = React.createClass({
 // return an object
 getInitialState(){ 
 return {
 isEditing: false
 }
 }
 render(){
 return <p></p>
 }
})

class TodoItem extends React.Component{
 constructor(props){
 super(props);
 this.state = { // define this.state in constructor
 isEditing: false
 } 
 }
 render(){
 return <p></p>
 }
}

Mixins的支持不同

Mixins(混入)是面向对象编程OOP的一种实现，其作用是为了复用共有的代码，将共有的代码通过抽取为一个对象，然后通过Mixins进该对象来达到代码复用。

React.createClass在创建组件时可以使用mixins属性，以数组的形式来混合类的集合。

var SomeMixin = { 
 doSomething() {
 }
};
const Contacts = React.createClass({ 
 mixins: [SomeMixin],
 handleClick() {
 this.doSomething(); // use mixin
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

但是遗憾的是React.Component这种形式并不支持Mixins，至今React团队还没有给出一个该形式下的官方解决方案；但是React开发者社区提供一个全新的方式来取代Mixins,那就是Higher-Order Components。

如何选择哪种方式创建组件

由于React团队已经声明React.createClass最终会被React.Component的类形式所取代。但是在找到Mixins替代方案之前是不会废弃掉React.createClass形式。所以：

能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

除此之外，创建组件的形式选择还应该根据下面来决定：

1、只要有可能，尽量使用无状态组件创建形式。

2、否则（如需要state、生命周期方法、ref等），使用`React.Component`这种es6形式创建组件

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

Node.js中如何合并两个复杂对象的介绍

关于react-native之ART绘图的方法

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!