La diferencia es que usar ref={callback} react le devuelve la responsabilidad de administrar el almacenamiento de referencia. Cuando usa ref="sometext", debajo de las cubiertas, react tiene que crear una propiedad refs en su clase y luego agregarle todas las declaraciones ref="sometext".

Si bien es bueno tener un acceso simple this.refs.sometext a los componentes, es difícil y propenso a errores en el lado de reacción para limpiar esta propiedad refs cuando se destruye el componente. Es mucho más fácil para reaccionar pasarle el componente y permitirle manejar almacenarlo o no.

De acuerdo con los documentos de reacción

React llamará a la devolución de llamada ref con el elemento DOM cuando el componente se monte, y lo llamará con nulo cuando se desmonte.

En realidad, esta es una idea bastante ingeniosa, al pasar nulo al desmontar y volver a llamar a su devolución de llamada, automáticamente limpia las referencias.

Para usarlo realmente, todo lo que tiene que hacer es acceder desde cualquier función de esta manera:

 class CustomTextInput extends React.Component { constructor(props) { super(props); this.focus = this.focus.bind(this); } focus() { // Explicitly focus the text input using the raw DOM API this.textInput.focus(); } render() { // Use the `ref` callback to store a reference to the text input DOM // element in this.textInput. return ( <div> <input type="text" ref={(input) => { this.textInput = input; }} /> <input type="button" value="Focus the text input" onClick={this.focus} /> </div> ); } }

La devolución de llamada que configuró en ref recibirá el componente como primer parámetro, la palabra 'this' será la clase actual 'CustomTextInput' en este ejemplo. Establecer this.textInput en su devolución de llamada hará que textInput esté disponible para todas las demás funciones como focus()

Ejemplo concreto

Tweet de Dan Abermov que muestra un caso en el que las devoluciones de llamada de referencia funcionan mejor

Actualizar

Según Facebook Docs , el uso de cadenas para referencias se considera heredado y "recomiendan usar el patrón de devolución de llamada o la API createRef en su lugar".

Cuando asigna un ref={callback} como <input type="text" ref={(input) => {this.textInput = input}}/> lo que básicamente está haciendo es guardar el ref con el nombre textInput para el futuro usar. Entonces, en lugar de usar ref="myInput" y luego usar this.refs.myInput , podemos usar el método de devolución de llamada y luego acceder al componente más tarde como this.textInput .

Aquí hay una demostración de lo mismo, mediante la cual estamos accediendo al input value usando ref al hacer clic en el button click

 class App extends React.Component { constructor(){ super(); } handleClick = () => { console.log(this.textInput.value); } render() { return ( <div> <input type="text" ref={(input) => {this.textInput = input}}/> <button type="button" onClick={this.handleClick}>Click</button> </div> ) } } ReactDOM.render(<App/>, document.getElementById('app'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.4/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.4/react-dom.min.js"></script> <div id="app"></div>

Con React 16.3, puedes usar la API React.createRef() en su lugar:

 class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; } }