reactjs this.refs vs document.getElementById

3 minutos de lectura

Si solo tengo formularios básicos, ¿debería seguir this.refs o simplemente ir con document.getElementById?

Por básico me refiero a algo como:

export default class ForgetPasswordComponent extends React.Component {
  constructor(props) {
    super(props);

    this.handleSendEmail = this.handleSendEmail.bind(this);
  }

  handleSendEmail(e) {
    e.preventDefault();

    // this.refs.email.value
    // document.getElementById('email').value
  }

  render() {
    <form onSubmit={this.handleSendEmail}>
      <input id="email" ref="email" type="text" />
      <input type="submit" />
    </form>
  }
}

¿Hay alguna desventaja en usar uno sobre el otro?

  • Si tiene varias instancias de ForgetPasswordComponent dentro de una sola página o si tiene otros elementos con la identificación ‘correo electrónico’, existe la posibilidad de que se seleccione el elemento incorrecto.

    – Isuru

    17 mayo 2016 a las 10:49

  • Si hago que las identificaciones sean lo más únicas posible (ya que las identificaciones deberían ser únicas en html de todos modos), ¿debería seguir buscando referencias o identificaciones? ¿Hay alguna desventaja en usar referencias?

    – índice

    17 mayo 2016 a las 11:08

  • relacionado: stackoverflow.com/questions/38093760/…

    – James Gentes

    13 de marzo de 2017 a las 18:24

En general, refs es mejor que document.getElementByIdporque está más en línea con el resto de su código de reacción.

En reaccionar, cada clase de componente puede tener múltiples instancias de componentes.
Y como @Isuru señala en los comentarios: usando id es peligroso, porque reaccionar no le impide tener múltiples formularios en 1 página, y luego su DOM contiene múltiples entradas con la misma ID. Y eso no está permitido.

Otra ventaja de usar referencias es que, por diseño, solo puede acceder a las referencias en el contexto en el que las define. Esto lo obliga a usar accesorios y estado (y posiblemente tiendas) si necesita acceder a información fuera de este contexto.
Y esto es una ventaja, porque hay menos o ninguna posibilidad de que rompa su flujo de datos unidireccional, lo que haría que su código fuera menos manejable.

NB: En casi todos los casos, las referencias se pueden evitar por completo. Es un principio de diseño para que Netflix lo use sin árbitros, nuncacomo lo explica Steve McGuire (Ingeniero sénior de interfaz de usuario en Netflix) en este video de reactjs conf 2016 (9:58m en el video).
En su caso, esto significaría poner el valor de entrada de correo electrónico en el estado del formulario, agregar el controlador onChange y usar el valor de estado en el evento de envío.

  • +1 por mencionar que en la mayoría de los casos no necesita usar ninguno de ellos, pero debe usar value + onChange (o LinkedStateMixin).

    – Björn Boxstart

    17 mayo 2016 a las 11:35

  • He leído sobre el uso del estado y estoy un poco indeciso de usarlo debido a una gran cantidad de implementación como agregar value, onchangevalue, state y cuando hay muchos campos en el formulario, empiezas a tener muchos de esos. Jeje. Entonces, ¿realmente se prefiere usar valor + estado + cambio?

    – índice

    18 de mayo de 2016 a las 3:37

  • Sí, es preferible a las referencias. Las referencias son un atajo y es probable que lo lleven a una pesadilla de depuración a medida que crece su aplicación.

    – terciopelo

    18 de mayo de 2016 a las 5:53

  • Las referencias también pueden aumentar la complejidad de lo que está tratando de hacer si comienzan a transmitirse a los niños a través de accesorios. Si está haciendo algo como un botón de desplazamiento hacia arriba anidado, recomendaría usar document.getElement… será más limpio, indicará la intención y no involucrará acciones relacionadas con el estado. Sin embargo, es posible que desee realizar un control para confirmar que el elemento de destino existe antes de llamar a scrollTo. Sin embargo, para cosas como formularios, recomiendo encarecidamente evitar refs o document.getElement y encontrar una manera de estructurar las cosas con el estado.

    –Jax Cavalera

    5 de febrero de 2018 a las 23:27

  • Irónicamente, Elijah Meeks, jefe de datavis en Netflix, recomienda el uso de referencias al combinar React + D3 en su discusión de 2017 sobre el tema: medium.com/@Elijah_Meeks/…

    – duhaime

    13 sep 2020 a las 20:15

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad