Wie lernt man reagieren? Detaillierte Einführung in den Lernpfad von React (vollständige Beispiele enthalten)

Learning React passiert nicht über Nacht, und der Einstieg scheint auch nicht so einfach zu sein. Aber ich denke, es lohnt sich. Lesen wir diesen Artikel

Dies ist ein Teil meiner Erfahrung beim Erlernen von React. Ich hoffe, es kann allen helfen!

Vorschau

Dies ist ein einfaches Benutzerverwaltungssystem mit den Funktionen Hinzufügen, Löschen und Ändern.

Stil

Beginnen wir mit dem einfachsten Stil

React kann zwei Stile verwenden, einer ist gewöhnliches CSS, ein Stil definiert in React.

Gewöhnlicher CSS-Stil, referenziert durch className=""

<!--普通css样式-->
<style>
	.style_2{
		background-color: #6699ff;
		font-size: 24px;
		padding: 3px 5px 3px 5px;
		color: #FFFFFF;
	}
	.Separate{
		height: 10px;
	}
</style>

In React definierter Stil, referenziert durch style={}

<span className="style_2">账号:</span>

//React的css样式
	var style_1={
		color:'#9900ff',
		padding:3,
	}

Komponente

Bauen Sie die Komponente (benennen Sie sie nach Belieben, der erste Buchstabe sollte großgeschrieben werden), ich habe hier und dann eine Komponente namens Board erstellt Initialisiert über getInitialState. Über ReactDOM.render in die HTML-Seite laden. Wenn in ReactDOM.render mehrere Komponenten oder Tags vorhanden sind, müssen diese mit einem p-Tag umschlossen werden.

<h1 style={style_1}>落叶丶Fly的React小站</h1>

var Board = React.createClass({
		//初始数据
		getInitialState: function(){
			return ({
				comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}]
			});    },

//初始化
		eachComment: function(text,i){
			return (
				
					


					<span className="style_2">账号:</span>
					{text.account}
					


					用户名:
					{text.name}
				
			);
		},

props and state

state: React behandelt Komponenten als Zustandsmaschinen. Durch die Interaktion mit dem Benutzer werden verschiedene Zustände erreicht und anschließend die Benutzeroberfläche gerendert, um die Benutzeroberfläche und die Daten konsistent zu halten. In React müssen Sie nur den Status der Komponente aktualisieren und dann die Benutzeroberfläche basierend auf dem neuen Status neu rendern (ohne das DOM zu manipulieren).

Requisiten: Der Hauptunterschied zwischen Zustand und Requisiten besteht darin, dass Requisiten unveränderlich sind, während der Zustand basierend auf Interaktion geändert werden kann mit dem Benutzer ändern. Aus diesem Grund müssen einige Containerkomponenten einen Status definieren, um Daten zu aktualisieren und zu ändern. Unterkomponenten können Daten nur über Requisiten weitergeben.

Funktion

Das Schaltflächenklickereignis in React ähnelt gewöhnlichem JavaScript, achten Sie jedoch auf onClick Das C in muss großgeschrieben werden, sonst wird ein Fehler gemeldet. Dieser Artikel ändert den booleschen Wert der Bearbeitung durch Klicken auf eine Schaltfläche und aktualisiert ihn mit der Funktion setState, um zwischen Normalmodus und Bearbeitungsmodus zu wechseln. (Wenn Sie mehr sehen möchten, besuchen Sie die Spalte React Reference Manual der chinesischen PHP-Website, um mehr zu erfahren)

ReactDOM.render(
		//需要用一个p标签来包裹
		

			<h1 style={style_1}>落叶丶Fly的React小站</h1>
			
		
,
		document.getElementById('container')
	);

<button onClick={this.edit}>编辑</button>

		//编辑
		edit: function(){
			this.setState({editing: true});
		},
		//保存
		save: function(){
			var val = this.refs.new_account.value;
			var val1 = this.refs.new_name.value;
			console.log("拿到的值是: " + val+val1);
			this.props.updateCommentText(val,val1,this.props.index)
			this.setState({editing: false});
		},

Alle Codes

                //普通模式
		renderNormal:function(){
			return (
				

					
{this.props.children}
					<button onClick={this.edit}>编辑</button>
					移除
				

			);
		},
		//编辑模式
		renderForm:function(){
			let children =  this.props.children
			return (
				

					
					

					
					

					保存
				

			)
		},
		//模式更改
		render: function (){
			//console.log(this.props)
			if(this.state.editing){
				return this.renderForm();
			}else{
				return this.renderNormal();
			}
		}

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur Spalte React User Manual der PHP-Website, um mehr zu erfahren). Nachricht unten.

Das obige ist der detaillierte Inhalt vonWie lernt man reagieren? Detaillierte Einführung in den Lernpfad von React (vollständige Beispiele enthalten). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!