Maison > Article > interface Web > 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 :
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.
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 :
Dans React, les événements sont nommés en utilisant la notation camel au lieu de toutes les lettres minuscules
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 原生事件对象保持一致。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
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!