So implementieren Sie komponenteninterne Kommunikation in React

In diesem Artikel wird hauptsächlich die interne Kommunikationsmethode der Komponenten bei der React-Datenübertragung vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

1. Überblick

Nachdem Sie das primäre Frontend für eine Weile verlassen haben, werden Sie feststellen, dass Sie immer weniger Zeit damit verbringen, Stile zu schreiben und mehr Zeit für die Datenverarbeitung. Der Prozess der Datenverarbeitung ist auch der Prozess der Implementierung der Geschäftslogik, der zweifellos der wichtigste im Projekt ist.

Nachdem Sie das Front-End-Framework kennengelernt und die grundlegende Syntax verstanden haben, besteht der nächste Schritt darin, zu lernen, wie Daten übertragen werden.

Einer der Höhepunkte des Angular-Designs ist zu Beginn die bidirektionale Datenbindung. Nachdem ich Vue eine Weile verwendet hatte, stellte ich fest, dass die sogenannte bidirektionale Datenbindung das einzige Anwendungsszenario ist Innerhalb der Komponente befindet sich das Formular (Eingabe, Textbereich, Auswahl, Radio) und die bidirektionale Datenbindung in diesem Szenario. Auch wenn sie nicht im Framework implementiert ist, ist es sehr einfach, sie selbst zu implementieren. Nachdem ich das verstanden habe, halte ich es für naiv zu glauben, dass React keine bidirektionale Datenbindung implementiert hat.

Bei der React-Datenübertragung geht es um zwei Aspekte:

1. Zu den typischen Anwendungsszenarien gehört die Implementierung einer bidirektionalen Datenbindung Bindeereignisse;

2. Datenübertragung zwischen Komponenten. Einschließlich übergeordneter Komponenten, die Daten an untergeordnete Komponenten weitergeben, untergeordneten Komponenten, die Daten an übergeordnete Komponenten weitergeben, und Daten, die zwischen Geschwisterkomponenten weitergeleitet werden.

In diesem Artikel geht es zunächst um die Datenübertragung innerhalb der Komponente.

2. Interne Datenübertragung der Komponente

Die interne Kommunikation der Reaktionskomponente ist hauptsächlich in zwei Teile unterteilt: Datenanzeige und Ereignisverarbeitung.

2.1 Datenanzeige

Die Anzeige und Aktualisierung der internen Daten der Komponente wird über den Status implementiert. Wenn Sie den Status verwenden möchten, müssen Sie die ES6-Klasse verwenden Definieren Sie die Komponente. Datenaktualisierungen werden im Abschnitt zur bidirektionalen Datenbindung erläutert, in dem nur die Anzeige initialisierter Daten behandelt wird.

Wenn Sie mit Vue vertraut sind, entspricht das Statusobjekt von React dem Datenobjekt von Vue

Das Folgende ist ein Beispiel für die reine Anzeige von Daten:

class App extends Component {
 constructor(props) {
 super(props);

 // 初始化 state
 this.state = {
  inputValue: "test",
 };
 }

 render() {
 // 注意，在 react 中，DOM 元素是对象，所以使用‘()'包住 
 return (
  <p className="App">
  <p>{this.state.inputValue}</p>
  </p>
 );
 }
}

In einer React-Komponente definiert Nach der Klasse werden zusätzlich zur Lebenszyklus-Hook-Funktion auch automatisch die beiden Methoden Konstruktor () und Konstruktor () ausgeführt. Während der Ausführung von Konstruktor () werden Daten für Rendering () vorbereitet Rendern Sie das DOM.

Tatsächlich ist die Funktion „constructor()“ die erste Funktion, die im Komponentenlebenszyklus aufgerufen wird.

2.2 Ereignisse

2.2.1 Ähnlichkeiten und Unterschiede mit Ereignissen in DOM

Verarbeitung von Ereignissen in React und in der DOM-Verarbeitung events ist ähnlich, mit zwei Unterschieden:

1. In React werden Ereignisse in der Groß-/Kleinschreibung anstelle von Kleinbuchstaben in React benannt Übergeben Sie Funktionen direkt als Event-Handler in JSX anstelle von Strings.

2. Der zweite Punkt ist anders und hat Fallstricke, auf die später im Detail eingegangen wird

Zum Beispiel Ereignisse in HTML:

<button onclick="activateLasers()">
 Activate Lasers
</button>

Ereignisse in Reagieren:

// 因为 jsx 中'{}'里面代表函数表达式，
// 所以传递给 onClick 的实际是函数 activateLasers 的函数体部分，
// 因此需要指定 this 指向，不然会报错
<button onClick={activateLasers}>
 Activate Lasers
</button>

2.2.2 Fallstricke

Die direkte Übergabe einer Funktion als Event-Handler erfordert die Angabe der Ausführungsumgebung der Funktion, d. h. eine manuelle Bindung, andernfalls wird dies der Fall sein als undefinierte Schuld gemeldet werden. Siehe das Beispiel unten:

class App extends Component {
 constructor(props) {
 super(props);
 this.state = {
  isToggleOn: true,
 };

 // 手动绑定 this
 this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
 // 如果不在 constructor() 方法中手动绑定 this，直接将其作为事件处理程序 this 为 undefined
 console.log(this);

 this.setState(prevState => ({
  isToggleOn: !prevState.isToggleOn
 }));
 }

 render() {
 return (
  <p className="App">
  <button onClick={this.handleClick}>
   {this.state.isToggleOn ? "on" : "off"}
  </button>
  </p>
 );
 }
}

2.2.3 Warum gibt es eine Falle

Auf der offiziellen Website von React heißt es, dass dieses Problem native JS-Syntax erfordert, aber das ist nicht unbedingt der Fall Der Fall ist, dass ein solches Ereignissystem tatsächlich unter bestimmten Umständen entwickelt wurde. Wenn jemand aufstehen und die Schuld auf sich nehmen muss, geben Sie ihm eine 50:50-Chance.

1, Probleme mit der nativen JS-Syntax

Es gibt eine solche Regel in der JS-Syntax: Wenn der Funktionskörper einer Funktion (ohne ()) einer anderen zugewiesen wird Variablen, deren Zeiger innerhalb des Funktionskörpers sich ändern kann. Ob sich dies ändert, hängt davon ab, ob sich die Funktion und die zugewiesene Variable im selben Bereich (gleicher Ausführungsumgebung) befinden. In der tatsächlichen Verwendung macht es jedoch keinen Sinn, eine Funktion einer Variablen im selben Bereich zuzuweisen Diese Funktion direkt eingeben. Das ist in Ordnung, es ist nicht nötig, sie einer anderen Variablen zuzuweisen. Dies weist auf ein bedeutungsloses Beispiel hin, das sich nicht ändert (zur Vereinfachung der Erklärung verwenden Sie direkt den Operator var):

var fn = function () {
 console.log(this);
};

var a = fn;

fn(); // window
a(); // window
this 指向发生改变的例子：

var fn = function () {
 console.log(this);
};

// 将函数体赋值给一个对象的属性，函数执行时 this 和定义时指向不同
var o = {
 a: fn,
};

fn(); // window
o.a(); // o，即{a:f}

Wenn Sie den Funktionskörper einer anderen Variablen zuweisen möchten und gleichzeitig Weisen Sie gleichzeitig das Original zu Der This-Zeiger der Funktion wird auch zusammen zugewiesen, daher müssen Sie ihn während des Zuweisungsprozesses wie folgt binden:

var fn = function () {
 console.log(this);
};

// fn 在赋值的同时将内部的 this 打包一块赋值给了 a
var o = {
 a: fn.bind(this),
};

fn(); // window
o.a(); // window

Normalerweise beim Zuweisen des Funktionskörpers zu einer Variablen, um Vermeiden Sie diesen Fehler, die Bindung ist abgeschlossen. Ein typisches Beispiel ist var bindId = document.getElementById(document)

2

Aufgrund der DOM-Elemente in JSX ist es auch ein Objekt, den Attributen eines Elements Werte zuzuweisen. Siehe unten:

const element = (
 <button onClick={this.handleClick}>click me</button>
);

ist äquivalent zu rrree

Dies weist tatsächlich auf unterschiedliche Szenarien hin, wenn die Funktion ausgeführt wird und wenn sie definiert ist , der this-Zeiger hat sich geändert. Der Unterschied besteht darin, dass in nativem JS, egal was passiert, immer auf einen Zeiger zeigt, während JSX direkt undefiniert ist.

Der Fehler, dies nicht zu binden und undefiniert zu melden, kann also nicht ausschließlich auf die native JS-Syntax zurückgeführt werden.

3. 双向数据绑定

通过 state 传递数据加上事件处理程序便能实现数据的双向绑定，其背后的思想是（以 input 为例）：初始化时将 state 中预定义的 state a 赋值给 input，当 input 的 value 发生改变时，触发事件处理程序，将改变后的 value 赋值给状态 a ，React 监测到 state 改变时重新调用 render() 方法，即重新渲染组件，达到双向绑定的目的。

class App extends Component {
 constructor(props) {
  super(props);
  this.state = {
   inputValue: "test",
  };
  this.changeInput = this.changeInput.bind(this);
 }

 changeInput(e) {
  // 将改变后的 input 值赋值给 inputValue，通过事件对象 $event.target.value 实现
  this.setState({
   inputValue: e.target.value
  });
 }

 render() {
  // input 改变时触发 changeInput
  return (
   <p className="App">
    <input value={this.state.inputValue} onChange={this.changeInput} />
    <p>{this.state.inputValue}</p>
   </p>
  );
 }
}

这里用到了事件对象，React 的事件对象和 JS 原生事件对象保持一致。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用Node.js爬虫如何实现网页请求

使用VueAwesomeSwiper容易出现的问题？

在angular2中有关Http请求原理（详细教程）

在node中如何实现http小爬虫

Das obige ist der detaillierte Inhalt vonSo implementieren Sie komponenteninterne Kommunikation in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!