Quels sont les avantages des composants de fonction React par rapport aux composants de classe ?

Les avantages des composants de fonction React par rapport aux composants de classe sont les suivants : 1. La syntaxe des composants de fonction est plus courte et plus simple, ce qui facilite le développement, la compréhension et les tests. 2. Les composants fonctionnels ont une faible consommation de performances car les composants fonctionnels n'ont pas besoin d'être utilisés. Instance créée, exécutez-la lors du rendu et détruisez directement tous les éléments intermédiaires après avoir obtenu l'élément de réaction renvoyé.

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

1. Composants de classe

Les composants de classe, comme leur nom l'indique, sont écrits sous la forme de classes ES6. Cette classe doit hériter de React.Component

Si vous souhaitez accéder aux paramètres passés par le composant parent. , Il est accessible via this.props

La méthode de rendu doit être implémentée dans le composant et l'objet React est renvoyé en retour, comme suit :

class Welcome extends React.Component {
	constructor(props) {
		super(props)
	}

	render() {
		return <h1>Hello,{this.props.name}</h1>
	}

2. Composant de fonction

Composant de fonction, comme le son nom l'indique, est écrit via des fonctions. Implémenter un composant React sous la forme de est le moyen le plus simple de définir un composant dans React

function Welcome(props) {

	return <h1>Hello,{props.name}</h1>;
}

Le premier paramètre de la fonction est props, qui est utilisé pour recevoir les paramètres transmis par le composant parent

Trois. La différence

pour les deux types de composants React, leurs différences sont principalement divisées dans les grandes directions suivantes :

1 Forme d'écriture

La différence la plus évidente entre les deux est la forme d'écriture.

Composant de fonction :

function Welcome(props) {   
return <h1>Hello, {props.name}</h1>; 
}

Composant de classe :

cass Welcome extends React.Component {
	constructor(props) {
		super(props)
	}

	render() {

		return <h1>Hello,{this.props.name}</h1>
	}
}

2. est un composant sans état et ne peut pas enregistrer l'état du composant. Contrairement au composant de classe où setState est appelé

Si vous souhaitez gérer l'état, vous pouvez utiliser useState, comme suit :

const FunctionalComponent=()=> {
	const [count,
	setCount]=React.useState(0);

	return (
	<div> 
	<p>count: {count}</p> 
	<button onClick= {()=> setCount(count + 1)}>Click</button> 
	</div>);
};

Lors de l'utilisation de hooks, généralement s'il s'agit d'un composant de fonction. appelle l'état, vous devez créer un composant de classe ou mettre à niveau l'état vers votre composant parent, puis le transmettre via l'objet props

3 Cycle de vie

Dans les composants de fonction, il n'y a pas de cycle de vie. ces hooks de cycle de vie proviennent du React.Component hérité

Donc, si le cycle de vie est utilisé, seuls les composants de classe peuvent être utilisés

Mais les composants de fonction peuvent également utiliser useEffect pour terminer le cycle de vie de remplacement :

const FunctionalComponent=()=> {
	useEffect(()=> {
		console.log("Hello");
	}

	, []);
	return <h1>Hello,World</h1>;
};

.

L'exemple simple ci-dessus correspond au cycle de vie de composantDidMount dans les composants de classe

Si dans la fonction de rappel useEffect renvoie une fonction, la fonction de retour sera exécutée lorsque le composant est démonté, tout comme composantWillUnmount

const FunctionalComponent=()=> {
	React.useEffect(()=> {
		return ()=> {
			console.log("Bye");
		};
	}
	, []);
	return <h1>Bye,World</h1>;
};

Méthode d'appel

.

S'il s'agit d'un composant de fonction, l'appel consiste à exécuter la fonction :

// 你的代码  
function SayHi() {
	return <p>Hello,
	React</p>
}

// React内部  
const result = SayHi(props) //  <p>Hello, React</p>

S'il s'agit d'un composant de classe, vous devez instancier le composant puis appeler la méthode de rendu de l'objet instance :

// 你的代码  
class SayHi extends React.Component {
	render() {
		return <p>Hello,React</p>
	}
}

// React内部  
const instance = new SayHi(props) //  SayHi {}  
const result = instance.render() //  <p>Hello, React</p>

5. Obtenez la valeur rendue

Donnez d'abord un exemple

Le composant de fonction correspondant est le suivant :

function ProfilePage(props) {
	const showMessage=()=> {
		alert('Followed '+ props.user);
	}

	const handleClick=()=> {
		setTimeout(showMessage, 3000);
	}

	return (<button onClick= {
		handleClick
	}

	>Follow</button>)
}

Le composant de classe correspondant est le suivant :

class ProfilePage extends React.Component {
	showMessage() {
		alert('Followed '+ this.props.user);
	}

	handleClick() {
		setTimeout(this.showMessage.bind(this), 3000);
	}

	render() {
		return <button onClick= {
			this.handleClick.bind(this)
		}

		>Follow</button>
	}
}

Les deux semblent avoir la même fonction d'implémentation, mais dans le composant de classe , this.props.user est affiché. Props est immuable dans React, donc il ne changera jamais, mais c'est toujours variable, afin que vous puissiez lire la nouvelle version dans les fonctions de rendu et de cycle de vie

Donc, si notre composant est mis à jour pendant le la demande est en cours d'exécution. this.props va changer. La méthode showMessage lit l'utilisateur à partir des "derniers" accessoires

Le composant de fonction lui-même n'existe pas, et les accessoires ne changent pas, donc le même clic, le contenu de l'alerte est toujours le contenu précédent

Résumé

Les deux composants ont leurs propres avantages et inconvénients

La syntaxe du composant de fonction est plus courte et plus simple, ce qui facilite le développement, la compréhension et le test ; tandis que le composant de classe peut également prêter à confusion en raison de son utilisation intensive

Classe Les performances ; la consommation de composants est relativement importante, car les composants de classe doivent créer des instances de composants de classe et ne peuvent pas être détruits.

Les composants fonctionnels ont une faible consommation de performances, car les composants fonctionnels n'ont pas besoin de créer d'instances, ils sont exécutés lors du rendu et tous les composants intermédiaires sont directement détruits après avoir obtenu les éléments de réaction renvoyés.

【Recommandations associées :

Tutoriel vidéo Redis

】

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!