ReactJS | referencias

Las referencias son una función proporcionada por React para acceder al elemento DOM y al elemento React que podría haber creado por su cuenta. Se utilizan en casos en los que queremos cambiar el valor de un componente secundario, sin hacer uso de accesorios y todo. También nos brindan una buena funcionalidad, ya que podemos usar devoluciones de llamada con ellos. 

Ejemplo:  

// without refs
class App extends React.Component {
  constructor(){
   super();
   this.state = { sayings: ""};
   }
  update(e){
   this.setState({ sayings: e.target.value});
  }
  render(){
   return (
    <div>
     Mukul Says <input type="text" onChange = {this.update.bind(this)}/>
    <br/>
    <em>{this.state.sayings}</em>
   </div>
  );
 }
}
ReactDOM.render(< App />, document.getElementById('root'));

Producción: 

En el ejemplo anterior, estamos haciendo uso del valor objetivo del evento e, para obtener el valor de lo que dice Mukul. La salida anterior también se puede lograr usando las refs. 

Ejemplo:  

// using refs
class App extends React.Component {
 constructor(){
  super();
  this.state = { sayings: ""};
 }
 update(e){
  this.setState({ sayings: this.refs.anything.value});
 }
 render(){
  return (
   <div>
    Mukul Says <input type="text" ref="anything"
      onChange = {this.update.bind(this)}/>
   <br/>
   <em>{this.state.sayings}</em>
  </div>
  );
 }
}
 ReactDOM.render(< App />, document.getElementById('root'));

Producción: 
 

En lo anterior, hacemos uso de las referencias proporcionadas por React, también se pueden usar para agregar funciones de devolución de llamada dentro de ellas, lo que es útil en muchos casos. 

Ejemplo:  

// callback used inside ref
class App extends React.Component {
  constructor(){
   super();
   this.state = { sayings: ""};
  }
  update(e){
   this.setState({ sayings: this.a.value});
  }
  render(){
   return (
    <div>
     Mukul Says <input type="text"
     ref={(call_back) => {this.a = call_back}} onChange =
     {this.update.bind(this)}/>
   <br/>
   <em>{this.state.sayings}</em>
   </div>
  );
 }
}
ReactDOM.render(< App />, document.getElementById('root'));

Producción: 

Cuándo usar referencias  

• Útil cuando se utilizan bibliotecas de terceros.
• Útil en animaciones.

Cuándo no usar referencias 

• No debe usarse con componentes funcionales porque no tienen instancias.
• No debe usarse en cosas que se pueden hacer declarativamente.