Maison > interface Web > js tutoriel > Quelles sont les trois façons de créer des composants en réaction

Quelles sont les trois façons de créer des composants en réaction

王林
Libérer: 2021-03-15 10:56:08
avant
3366 Les gens l'ont consulté

Quelles sont les trois façons de créer des composants en réaction

Voici trois manières et caractéristiques des composants de réaction. J'espère qu'ils pourront être utiles à tout le monde.

1. Composants fonctionnels :

(1) Syntaxe :

function myConponent(props) {
	return `Hello${props.name}`
}
Copier après la connexion

(2) Fonctionnalités :

Une nouvelle API de hooks peut être trouvée sur le site officiel. Comprenez, c'était autrefois un composant sans état, mais maintenant il peut être avec état

Le composant ne peut pas accéder à cet objet

Impossible d'accéder à la méthode du cycle de vie

(3) Suggestions :

Si possible, essayez d'utiliser des composants sans état pour les garder simples et sans état. [Ce que l'auteur veut dire, c'est essayer d'utiliser les composants parents pour contrôler les composants enfants, les composants enfants sont utilisés pour l'affichage et les composants parents sont responsables de la logique]

2. Composant es5 React.createClass
<🎜. >

(1) Grammaire :

var myCreate = React.createClass({
	defaultProps: {
		//code
	},
	getInitialState: function() {
		return { //code };
	},
	render:function(){
		return ( //code );
	}
})
Copier après la connexion

(2) Caractéristiques :

Cette méthode est relativement ancienne et sera progressivement éliminée

(recommandation de tutoriel vidéo gratuit :

Tutoriel vidéo javascript )

3. Classe en mode es6 :

(1) Syntaxe :

class InputControlES6 extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			state_exam: props.exam
		}
		//ES6类中函数必须手动绑定
		this.handleChange = this.handleChange.bind(this);
	}
	handleChange() {
		this.setState({
			state_exam: &#39;hello world&#39;
		});
	}
	render() {
		return( //code )
	};
}
Copier après la connexion

(2) Caractéristiques :

la fonction membre ne sera pas automatique. La liaison nécessite que les développeurs la lient manuellement, sinon cela ne pourra pas obtenir l'objet d'instance de composant actuel.

L'état State est initialisé dans le constructeur

Le type d'attribut props et l'attribut par défaut du composant sont utilisés comme attributs de la classe de composant, pas comme attributs de l'instance de composant, donc la configuration statique de la classe est utilisé.

N'oubliez pas les principes de base de la création de composants :

  • La première lettre du nom du composant doit être en majuscule

  • Composants ne peut contenir qu'un nœud racine (si vous ne voulez pas que l'étiquette enveloppe ce nœud racine, vous pouvez introduire Fragment. Peu importe si vous ne savez pas comment utiliser Fragment. Vous pouvez lire les connaissances de base de l'auteur sur réagissez (1) dans cet article)

  • Utilisez autant que possible les composants fonctionnels pour les garder simples et sans état.

Enfin, comparons la différence dans la façon dont les composants de fonction et les composants de classe écrivent la même fonction :

Comparaison de l'état contrôlé par le composant parent

Fonction composant :

function App(props) {
	function handleClick() {
		props.dispatch({ type: &#39;app/create&#39; });
	}
	return <div onClick={handleClick}>{props.name}</div>
}
Copier après la connexion

composant de classe :

class App extends React.Component {
	handleClick() {
		this.props.dispatch({ type: &#39;app/create&#39; });
	}
	render() {
		return <div onClick={this.handleClick.bind(this)}>{this.props.name}</div>
	}
}
Copier après la connexion

Comparaison de l'état d'auto-maintenance

import React, { useState } from &#39;react&#39;;
function App(props) {
	const [count, setCount] = useState(0);
	function handleClick() {
		setCount(count + 1);
	}
	return <div onClick={handleClick}>{count}</div>
}
Copier après la connexion

composant de classe :

class App extends React.Component {
	state = { count: 0 }
	handleClick() {
		this.setState({ count: this.state.count +1 })
	}
	render() {
		return <div onClick={this.handleClick.bind(this)}>{this.state.count}</div>
	}
}
Copier après la connexion
Recommandations associées :

tutoriel 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!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal