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}`
}

(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 );
	}
})

(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: 'hello world'
		});
	}
	render() {
		return( //code )
	};
}

(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: '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 d'auto-maintenance

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>
	}
}

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!