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>); };
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ésMais 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>; };
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>
// 你的代码 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>) }
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 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 intensiveClasse 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!