Maison >interface Web >js tutoriel >Quelles sont les trois façons de créer des composants en réaction ?
Introduction aux trois façons de créer des composants dans React et leurs similitudes et différences :
1. Composants fonctionnels
(tutoriel recommandé). : Tutoriel React)
1. Syntaxe
function myConponent(props) { return `Hello${props.name}` }
2 Fonctionnalités
Vous pouvez accéder au site officiel pour en savoir plus sur la nouvelle API hooks. Avant, il était sans état. Les composants peuvent désormais être avec état
Les composants ne peuvent pas accéder à cet objet
Impossible d'accéder aux méthodes de cycle de vie
Suggestions :
Si possible. , Essayez d'utiliser des composants sans état et gardez-les simples et sans état. [Ce que l'auteur veut dire, c'est essayer d'utiliser les composants parents pour contrôler les sous-composants, les sous-composants sont utilisés pour l'affichage et les composants parents sont responsables de la logique]
2 façon es5 Composant React.createClass
1. Syntaxevar myCreate = React.createClass({ defaultProps: { //code }, getInitialState: function() { return { //code }; }, render:function(){ return ( //code ); } })2. Caractéristiques
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: 'hello world' }); } render() { return( //code ) }; }
2 Fonctionnalités :
la fonction membre ne la liera pas automatiquement, et le développeur doit la lier manuellement, sinon cela Impossible d'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 :
1. La première lettre du nom du composant doit être en majuscule
2. Un composant ne peut contenir qu'un seul nœud racine ( si ce nœud racine Si vous ne voulez pas que les balises le terminent, vous pouvez introduire Fragment
3. Essayez d'utiliser des composants fonctionnels pour les garder simples et sans état
Enfin, comparons. composants fonctionnels et composants de classe pour un même composant. Différence dans la façon dont les fonctions sont écrites :
Comparaison de l'état contrôlé par le composant parent
Composant de fonction :
function App(props) { function handleClick() { props.dispatch({ type: 'app/create' }); } return <div onClick={handleClick}>{props.name}</div> }
composant de classe
class App extends React.Component { handleClick() { this.props.dispatch({ type: 'app/create' }); } render() { return <div onClick={this.handleClick.bind(this)}>{this.props.name}</div> } }
Comparaison de l'état maintenu par lui-même
import React, { useState } from 'react'; function App(props) { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <div onClick={handleClick}>{count}</div> }
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> } }
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!