El concepto de vincular esta palabra clave no reacciona específicamente, sino que es específico de Javascript. Necesitamos vincular esta palabra clave porque el valor de esta palabra clave en una función simple no está definido. Por ejemplo, considere el siguiente código. Si se trata de un controlador de clics en un componente funcional, la salida no estará definida (solo en modo estricto, en modo no estricto apuntará a un objeto global).
Sintaxis:
function handleClick(event){
console.log(this); // 'this' is undefined
}
Entendamos con ejemplos.
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando:
cd foldername
Paso 3: después de crear la aplicación ReactJS, ejecute el servidor de desarrollo con el siguiente comando:
npm start
Estructura del proyecto: Tendrá el siguiente aspecto.
Hay 3 formas alternativas de vincular esta palabra clave en reaccionar.
Enfoque: en todos los métodos a continuación, hemos creado un estado de emoji geek en el componente de la aplicación. Al hacer clic en el botón, reduciremos el tamaño de la array de emoji geek en uno.
Primer método: podemos usar una función de flecha en el método de representación donde adjuntamos el controlador de eventos. Hay una implicación de rendimiento en este método, es decir, cada vez que el componente se vuelve a renderizar, la función se creará una y otra vez. Esto podría crear problemas de rendimiento si la aplicación web o el componente se vuelven a renderizar mucho.
Sintaxis:
onClick={() => this.handleClick()}
App.js
import "./App.css";
import React, { Component } from "react";
export class App extends Component {
constructor(props) {
super(props);
let styles = {
width: "120px",
color: "green",
padding: "5px",
margin: "2px",
border: "2px solid green",
};
this.state = {
mustKnowTopics: [
<div style={styles}>
<h4> Searching </h4>
</div>,
<div style={styles}>
<h4> Sorting </h4>
</div>,
<div style={styles}>
<h4> BinarySearch </h4>
</div>,
<div style={styles}>
<h4> SlidingWindow </h4>
</div>,
<div style={styles}>
<h4> Stack's </h4>
</div>,
<div style={styles}>
<h4> Queue's </h4>
</div>,
],
};
}
handleClick = () => {
let newTopics = [...this.state.mustKnowTopics];
newTopics = newTopics.slice(0, newTopics.length - 1);
this.setState({
mustKnowTopics: [...newTopics],
});
};
render() {
return (
<>
<div
style={{ margin: "1rem",
display: "flex",
flexDirection: "column" }}
>
<>
{" "}
<h3> Must know topics</h3>
<div style={{ display: "flex", flexDirection: "row" }}>
{this.state.mustKnowTopics}
</div>
</>
<button
onClick={() => this.handleClick()}
style={{ width: "100px", margin: ".5rem" }}
>
Click to reduce the Must know Topic's array
</button>
</div>
</>
);
}
}
export default App;
Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.
npm start
Producción:
Segundo método: enlazar esta palabra clave en el controlador de eventos onClick con la ayuda de bind(). Al igual que el método anterior, este enfoque tiene implicaciones en el rendimiento porque seguimos siendo reasignados en cada renderizado.
Sintaxis:
onClick={this.handleClick.bind(this)}
App.js
import "./App.css";
import React, { Component } from "react";
export class App extends Component {
constructor(props) {
super(props);
let styles = {
width: "120px",
color: "green",
padding: "5px",
margin: "2px",
border: "2px solid green",
};
this.state = {
mustKnowTopics: [
<div style={styles}>
<h4> Searching </h4>
</div>,
<div style={styles}>
<h4> Sorting </h4>
</div>,
<div style={styles}>
<h4> BinarySearch </h4>
</div>,
<div style={styles}>
<h4> SlidingWindow </h4>
</div>,
<div style={styles}>
<h4> Stack's </h4>
</div>,
<div style={styles}>
<h4> Queue's </h4>
</div>,
],
};
}
handleClick = () => {
let newTopics = [...this.state.mustKnowTopics];
newTopics = newTopics.slice(0, newTopics.length - 1);
this.setState({
mustKnowTopics: [...newTopics],
});
};
render() {
return (
<>
<div
style={{ margin: "1rem",
display: "flex",
flexDirection: "column" }}
>
<>
{" "}
<h3> Must know topics</h3>
<div style={{ display: "flex", flexDirection: "row" }}>
{this.state.mustKnowTopics}
</div>
</>
<button
onClick={this.handleClick.bind(this)}
style={{ width: "100px", margin: ".5rem" }}
>
Click to reduce the Must know Topic's array
</button>
</div>
</>
);
}
}
export default App;
Producción:
Tercer método: usar una función de flecha en la función handleClick. Este es un enfoque mucho mejor para vincular esto porque evita los problemas de rendimiento como en los dos métodos anteriores. Además, usan el valor de this en el ámbito adjunto y no importa cuánto nivel de anidamiento usemos, se referirá al contexto correcto. Este método utiliza este enlace léxico que los vincula automáticamente al ámbito en el que están definidos.
Sintaxis:
handleClick = () => {
// code
}
App.js
import "./App.css";
import React, { Component } from "react";
export class App extends Component {
constructor(props) {
super(props);
let styles = {
width: "120px",
color: "green",
padding: "5px",
margin: "2px",
border: "2px solid green",
};
this.state = {
mustKnowTopics: [
<div style={styles}>
<h4> Searching </h4>
</div>,
<div style={styles}>
<h4> Sorting </h4>
</div>,
<div style={styles}>
<h4> BinarySearch </h4>
</div>,
<div style={styles}>
<h4> SlidingWindow </h4>
</div>,
<div style={styles}>
<h4> Stack's </h4>
</div>,
<div style={styles}>
<h4> Queue's </h4>
</div>,
],
};
}
handleClick = () => {
let newTopics = [...this.state.mustKnowTopics];
newTopics = newTopics.slice(0, newTopics.length - 1);
this.setState({
mustKnowTopics: [...newTopics],
});
};
render() {
return (
<>
<div
style={{ margin: "1rem",
display: "flex",
flexDirection: "column" }}
>
<>
{" "}
<h3> Must know topics</h3>
<div style={{ display: "flex", flexDirection: "row" }}>
{this.state.mustKnowTopics}
</div>
</>
<button
onClick={this.handleClick}
style={{ width: "100px", margin: ".5rem" }}
>
Click to reduce the geek emojis
</button>
</div>
</>
);
}
}
export default App;
Producción:
Publicación traducida automáticamente
Artículo escrito por CyrusThapa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA