Comment implémenter la communication interne des composants dans React

Cet article présente principalement la méthode de communication interne des composants dans la transmission de données React. Maintenant, je le partage avec vous et le donne comme référence.

1. Présentation

Après avoir quitté le front-end principal pendant un certain temps, vous constaterez que vous passez de moins en moins de temps à écrire des styles. et plus de temps à traiter les données. Venez de plus en plus. Le processus de traitement des données est également le processus de mise en œuvre de la logique métier, qui est sans aucun doute le plus important du projet.

Ainsi, après avoir appris le framework front-end et compris la syntaxe de base, l'étape suivante consiste à apprendre à transférer des données.

L'un des points forts de la conception angulaire au début est la réalisation de la liaison bidirectionnelle des données. Après avoir utilisé Vue pendant un certain temps, j'ai découvert que la soi-disant liaison bidirectionnelle des données était la seule. Le scénario d'application à l'intérieur du composant est le formulaire (input, textarea, select, radio) et la liaison de données bidirectionnelle dans ce scénario, même si elle n'est pas implémentée dans le cadre, il est très simple de l'implémenter vous-même. Après avoir compris cela, je pense qu'il était naïf de penser que React n'avait pas implémenté la liaison de données bidirectionnelle.

Le transfert de données React implique deux aspects :

1. Le transfert de données au sein des composants. Les scénarios d'application typiques incluent la façon d'implémenter la liaison de données bidirectionnelle des formulaires et la façon de lier les événements.

2. Transfert de données entre composants. Y compris les composants parents transmettant des données aux composants enfants, les composants enfants transmettant des données aux composants parents et les données passant entre les composants frères.

Cet article aborde d'abord le transfert de données au sein du composant.

2. Transfert de données interne du composant

La communication interne du composant React est principalement divisée en deux parties : l'affichage des données et le traitement des événements.

2.1 Affichage des données

L'affichage et la mise à jour des données internes du composant sont implémentés via l'état Si vous souhaitez utiliser l'état, vous devez utiliser la classe ES6 pour. définir le composant. Les mises à jour des données sont abordées dans la section sur la liaison de données bidirectionnelle, qui traite uniquement de l'affichage des données initialisées.

Si vous connaissez Vue, l'objet d'état de React est équivalent à l'objet de données de Vue

Ce qui suit est un exemple d'affichage pur de données :

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

Dans la définition de classe Dans les composants React, en plus de la fonction hook de cycle de vie, les deux méthodes constructor() et render() sont également automatiquement exécutées. Constructor() est exécuté en premier, et pendant que constructor() est exécuté, les données sont préparées pour le rendu. () pour restituer le DOM.

En fait, la fonction constructor() est la première fonction appelée dans le cycle de vie du composant.

2.2 Événements

2.2.1 Similitudes et différences avec les événements dans DOM

Gestion des événements dans React et dans le traitement DOM events est similaire, avec deux différences :

1. Dans React, les événements sont nommés en utilisant la notation camel au lieu de toutes les lettres minuscules

2. dans React ; Transmettez les fonctions directement en tant que gestionnaires d'événements dans JSX au lieu de chaînes.

Le deuxième point est différent et comporte des pièges, qui seront abordés en détail plus tard

Par exemple, les événements en HTML :

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

Événements dans React ：

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

2.2.2 Pièges

Passer directement une fonction en tant que gestionnaire d'événements nécessite de spécifier l'environnement d'exécution de la fonction, c'est-à-dire de la lier manuellement , sinon il signalera cela comme une erreur non définie. Voir l'exemple ci-dessous :

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 Pourquoi y a-t-il des pièges

Le site officiel de React dit que ce problème nécessite une syntaxe native JS. En fait, ce n'est pas nécessairement le cas. React est vraiment un tel système d'événements qui a été conçu lorsque la syntaxe JS a été déterminée depuis longtemps. Si quelqu'un doit se lever et prendre le blâme, il doit lui donner une chance 50-50.

1, Problèmes avec la syntaxe native JS

Il existe une telle règle dans la syntaxe JS : si le corps de la fonction d'une fonction (sans ()) est affecté à une autre Variables, le pointeur this à l'intérieur du corps de la fonction peut changer. Le fait que cela change dépend du fait que la fonction et la variable affectée se trouvent dans la même portée (même environnement d'exécution), mais en utilisation réelle, cela n'a aucun sens d'attribuer une fonction à une variable dans la même portée. Dans ce cas, utilisez. cette fonction directement. C'est très bien, il n'est pas nécessaire de l'attribuer à une autre variable.

cela pointe vers un exemple dénué de sens qui ne change pas (pour faciliter l'explication, utilisez directement l'opérateur 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}

Si vous souhaitez affecter le corps de la fonction à une autre variable à en même temps Pour attribuer le pointeur this de la fonction d'origine au même bloc, vous devez le lier pendant le processus d'affectation, comme suit :

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

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

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

Habituellement, afin d'éviter ces erreurs lors de l'attribution de la fonction body à une variable , effectuera l'opération de liaison de l'environnement d'exécution. Un exemple typique est var bindId = document.getElementById.bind(document)

2 Problèmes avec JSX

parce que les éléments DOM dans JSX sont également des objets. Attribuer des valeurs aux attributs des éléments revient en fait à attribuer des valeurs aux attributs de l'objet élément DOM. Voir ci-dessous :

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

est équivalent. à

const element = {
 type: 'button',
 props: {
 onClick: this.handleClick,
 children: 'click me',
 },
};

. Il s'agit en fait d'attribuer le corps de la fonction à la propriété d'un objet. Cela indique différents scénarios lorsque la fonction est exécutée et lorsqu'elle est définie. la syntaxe native est que le pointeur this a changé. La différence est que quoi qu'il en soit dans JS natif, this a toujours un pointeur, alors que JSX est directement indéfini.

Donc, l'erreur de ne pas lier ceci et de signaler un élément indéfini ne peut pas être entièrement imputée à la syntaxe native de JS.

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小爬虫

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!