Zusammenstellung von Wissenspunkten für den Einstieg in React

Jeder, der am Frontend arbeitet, muss wissen, dass jetzt die Ära der drei großen Frameworks angebrochen ist – Vue, React und Angular. Vue gilt als am einfachsten zu starten, da seine Dateistruktur den Schatten von herkömmlichem HTML aufweist und daher für Frontend-Mitarbeiter, die neu darin sind, sehr „freundlich“ ist. Obwohl Angular auch HTML beibehält, ist der Einstieg am schwierigsten. Der Grund dafür könnte sein, dass es von den Back-End-Programmierern von Google entwickelt wurde und Rxjs asynchron verwendet. Der Schwellenwert ist für Front-End-Neulinge zu hoch . hoch. Der Einstieg in React ist mäßig schwierig. Verschiedene Meinungen im Internet besagen, dass der Einstieg in React schwieriger ist als in Vue. Die Schwierigkeit kann auf die Unfähigkeit zurückzuführen sein, JSX gründlich zu verstehen, oder auf das mangelnde Verständnis einiger Funktionen von ES6, was es schwierig macht, einige Punkte zu verstehen, und dann heißt es, dass der Einstieg in React schwieriger ist. Lassen Sie uns heute einige Wissenspunkte klären, die Sie beherrschen müssen, um mit React beginnen zu können.

Warum React einführen

Wenn Sie React schreiben, können Sie Code wie diesen schreiben:

import React from 'react'

function A() {
  // ...other code
  return <h1>前端桃园</h1>
}

Das müssen Sie Ich habe mich gefragt, ob der obige Code React nicht verwendet. Warum sollte React eingeführt werden?

Wenn Sie Import React aus „react“ löschen, wird der folgende Fehler gemeldet:

Wo wird es also verwendet? Wenn wir React einführen, kommt es zu einem Fehler. Wenn wir diesen Grund nicht verstehen, bedeutet das, dass JSX nicht sehr klar ist.

Sie können den obigen Code (ohne die Importanweisung zu ignorieren) zur Konvertierung in Online-Babel einfügen und feststellen, dass Babel den obigen Code in Folgendes umwandelt:

function A() {
  // ...other code
  return React.createElement("h1", null, "前端桃园");
}

Weil JSX im Wesentlichen nur syntaktischer Zucker ist Wird für die Funktion React.createElement(component, props, ...children) bereitgestellt.

Warum className anstelle von class verwenden

1 Das ursprüngliche Konzept von React besteht darin, mit der DOM-API des Browsers anstelle von HTML konsistent zu sein, da JSX eine JS-Erweiterung ist anstelle eines Ersatzes für HTML, das näher an der Erstellung des Elements liegt. Um eine Klasse für ein Element festzulegen, müssen Sie die className-API verwenden:

const element = document.createElement("p")
element.className = "hello"

2. Browserproblem: Vor ES5 können reservierte Wörter nicht in Objekten verwendet werden. Der folgende Code löst in IE8 einen Fehler aus:

const element = {
  attributes: {
    class: "hello"
  }
}

3. Destrukturierungsproblem: Wenn Sie Attribute destrukturieren, treten Probleme auf, wenn Sie eine Klassenvariable zuweisen:

const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }
const { className } = { className: 'foo' } 
const { class: className } = { class: 'foo' }

Warum Verwenden Attribute CamelCase

Da JSX syntaktisch näher an JavaScript als an HTML ist, verwendet React DOM CamelCase (CamelCase-Benennung), um die Namen von Attributen anstelle von HTML-Attributnamen zu definieren.

Warum müssen wir super aufrufen und Requisiten im Konstruktor übergeben?

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <p>
        </p><h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      
    );
  }
}

Und es gibt eine Passage, die es uns nicht nur erlaubt, super aufzurufen, sondern auch Requisiten zu übergeben , aber es sagt uns nicht, warum wir das tun.

Warum super aufrufen?

Eigentlich ist dies keine Einschränkung von React, sondern eine Einschränkung von JavaScript. Wenn Sie dies im Konstruktor aufrufen möchten, müssen Sie Muss es vorher super anrufen. In React initialisieren wir häufig den Status im Konstruktor, this.state = xxx, daher müssen wir super aufrufen.

Warum sollten Requisiten übergeben werden?

Sie denken vielleicht, dass Requisiten an Super übergeben werden müssen, sonst kann React.Component this.props nicht initialisieren:

class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

Wenn Sie jedoch versehentlich die Übergabe von Requisiten verpassen und super() direkt aufrufen, können Sie in render und anderen Methoden immer noch auf this.props zugreifen (versuchen Sie es, wenn Sie es nicht glauben).

Warum ist das in Ordnung? Weil React dem neu erstellten Instanzobjekt Requisiten zuweist, nachdem der Konstruktor aufgerufen wurde:

const instance = new YourComponent(props);
instance.props = props;

Aber bedeutet das, dass Sie super() anstelle von super(props) verwenden können, wenn Sie React verwenden?

Das funktioniert immer noch nicht, sonst empfiehlt Ihnen die offizielle Website nicht, „props“ aufzurufen, nachdem der Konstruktor ausgeführt wurde, sondern nach dem super()-Aufruf und vor dem Wenn der Konstruktor endet, ist this.props immer noch unbrauchbar.

// Inside React
Klassenkomponente {
Konstruktor(Requisiten) {
This.props = props;
// ...
}
}

// In Ihrem Code
Klasse Button erweitert React.Component {
Konstruktor(Requisiten) {
Super(); //

Das obige ist der detaillierte Inhalt vonZusammenstellung von Wissenspunkten für den Einstieg in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!