reactjs - logo - ¿Por qué ref=''string'' es “legacy”?

react logo

Question

En la documentación de React dicen:

React también admite el uso de una cadena (en lugar de una devolución de llamada) como accesorio de referencia en cualquier componente, aunque este enfoque es principalmente heredado en este punto.

https://facebook.github.io/react/docs/more-about-refs.html

Tome el siguiente ejemplo:

class Foo extends Component {
  render() {
    return <input onClick={() => this.action()} ref={input => (this._input = input)} />;
  }
  action() {
    console.log(this._input.value);
  }
}

¿Por qué debería preferir esto, en lugar de:

class Foo extends Component {
  render() {
    return <input onClick={() => this.action()} ref=''input'' />;
  }
  action() {
    console.log(this.refs.input.value);
  }
}

?

Parece mucho más limpio y fácil el segundo ejemplo.
¿Existen riesgos de que el método de cadena sea obsoleto?

NB : Estoy buscando la respuesta "oficial" a la declaración en la documentación, no estoy preguntando sobre preferencias personales, etc.

Answer 1

Publicado originalmente por danabramov en https://news.ycombinator.com/edit?id=12093234

1. Las referencias de cadena no son compostables. Un componente de ajuste no puede "curiosear" en una referencia a un elemento secundario si ya tiene una referencia de cadena existente. Por otro lado, las referencias de devolución de llamada no tienen un solo propietario, por lo que siempre puede componerlas.
2. Las referencias de cadena no funcionan con análisis estático como Flow. Flow no puede adivinar la magia que hace el framework para hacer que la referencia de cadena "aparezca" en this.refs , así como su tipo (que podría ser diferente). Las referencias de devolución de llamada son más amigables con el análisis estático.
3. El propietario de una referencia de cadena está determinado por el componente que se está ejecutando actualmente. Esto significa que con un patrón común de "devolución de llamada de renderizado" (por ejemplo, <DataTable renderRow={this.renderRow} /> ), el componente incorrecto será el propietario de la referencia (terminará en DataTable lugar de que su componente defina renderRow ).
4. Las referencias de cadena obligan a React a realizar un seguimiento del componente que se está ejecutando actualmente. Esto es problemático porque hace que el módulo de react tenga estado y, por lo tanto, causa errores extraños cuando el módulo de react se duplica en el paquete.

Answer 2

Si bien quizás sea más simple, la antigua API de referencias puede ser difícil en algunos casos extremos, como cuando se usa en una devolución de llamada. Todo tipo de análisis estático también es un problema con las cadenas. La API basada en devolución de llamada puede hacer todo lo que la API de cadena puede hacer y más con solo un poco de verbosidad añadida.

class Repeat extends React.Component {
  render() {
    return <ul> {
      [...Array(+this.props.times)].map((_, i) => {
        return <li key={i}> { this.props.template(i)    } </li>
      })
    } </ul>
  }
}

class Hello extends React.Component {
  constructor() {
    super();
    this.refDict = {};
  }

  render() {
    return <Repeat times="3" template={i => <span ref= {el => this.refDict[i] = el}> Hello {i} </span>} />
           {/*                                    ^^^ Try doing this with the string API          */}
  }
}

Puede encontrar más discusión y una lista un poco más completa de los posibles problemas con la API basada en cadenas en el número 1373 , donde se introdujo la API basada en devolución de llamada. Incluiré aquí una lista de la descripción del problema:

La API de referencia está rota es varios aspectos.

• Debe referirse a this.refs [''myname''] como cadenas para que sea compatible con el modo avanzado del compilador de cierre.

• No permite la noción de múltiples propietarios de una sola instancia.

• Las cadenas dinámicas mágicas potencialmente rompen las optimizaciones en las máquinas virtuales.

• Tiene que ser siempre consistente, porque se resuelve sincrónicamente. Esto significa que el procesamiento por lotes asincrónico de la representación introduce errores potenciales.

• Actualmente tenemos un gancho para obtener referencias de hermanos para que pueda hacer que un componente se refiera a su hermano como referencia de contexto. Esto solo funciona en un nivel. Esto rompe la capacidad de envolver uno de esos en una encapsulación.

• No se puede escribir estáticamente. Debe emitirlo en cualquier uso en lenguajes como TypeScript.

• No hay forma de adjuntar la referencia al "propietario" correcto en una devolución de llamada invocada por un niño. <Child renderer={index => <div ref="test">{index}</div>} /> - esta referencia se adjuntará donde se emite la devolución de llamada, no en el propietario actual.

Los documentos llaman a la antigua cadena API "heredada" para dejar en claro que la API basada en la devolución de llamada es el enfoque preferido, como se discute en este compromiso y en este PR, que son los que realmente ponen esas declaraciones en la documentación en el primer lugar. También tenga en cuenta que algunos de los comentarios implican que la API de referencia basada en cadenas podría quedar obsoleta en algún momento.