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. Syntaxe

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

3. :

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!