¿Usar estado o referencias en componentes de formulario React.js?

Estoy comenzando con React.js y quiero hacer un formulario simple pero en la documentación he encontrado dos formas de hacerlo.

El primero está usando Refs :

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    // TODO: send request to the server
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

Y el segundo está usando el estado dentro del componente React:

var TodoTextInput = React.createClass({
  getInitialState: function() {
    return {
      value: this.props.value || ''
    };
  },

  render: function() /*object*/ {
    return (
      <input className={this.props.className}
      id={this.props.id}
      placeholder={this.props.placeholder}
      onBlur={this._save}
      value={this.state.value}
      />
    );
  },

  _save: function() {
    this.props.onSave(this.state.value);
    this.setState({value: ''
  });
});

No veo los pros y los contras de las dos alternativas, si es que existe alguna. Gracias.

La versión corta: evita las referencias.

Son malos para la mantenibilidad y pierden gran parte de la simplicidad que proporciona el renderizado del modelo WYSIWYG.

Tienes una forma. Necesita agregar un botón que restablezca el formulario.

• refs:
  • manipular el DOM
  • render describe cómo se veía el formulario hace 3 minutos
• estado
  • setState
  • render describe cómo se ve el formulario

Tiene un campo de número CCV en una entrada y algunos otros campos en su aplicación que son números. Ahora necesita hacer cumplir que el usuario solo ingrese números.

• refs:
  • agregue un controlador onChange (¿no estamos usando referencias para evitar esto?)
  • manipular dom en onChange si no es un número
• estado
  • ya tienes un controlador onChange
  • agregue una declaración if, si no es válida, no haga nada
  • render solo se llama si va a producir un resultado diferente

Eh, no importa, el primer ministro quiere que hagamos una sombra de caja roja si no es válido.

• refs:
  • hacer que el controlador onChange simplemente llame a forceUpdate o algo así?
  • hacer la salida de render basada en ... ¿eh?
  • ¿De dónde obtenemos el valor para validar en render?
  • manipular manualmente la propiedad dom className de un elemento?
  • estoy perdido
  • reescribir sin referencias?
  • leer del dom en render si estamos montados, de lo contrario, ¿asumimos que es válido?
• estado:
  • eliminar la declaración if
  • hacer render validar basado en this.state

Necesitamos devolver el control a los padres. Los datos ahora están en accesorios y debemos reaccionar a los cambios.

• refs:
  • implementar componentDidMount, componentWillUpdate y componentDidUpdate
  • diferenciar manualmente los accesorios anteriores
  • manipular el dom con el mínimo conjunto de cambios
  • ¡Oye! estamos implementando reaccionar en reaccionar ...
  • hay más, pero me duelen los dedos
• estado:
  • sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js

La gente piensa que los árbitros son "más fáciles" que mantenerlo en regla. Esto puede ser cierto durante los primeros 20 minutos, no es cierto en mi experiencia después de eso. Póngase en posición de decir "Sí, lo terminaré en 5 minutos" en lugar de "Claro, solo reescribiré algunos componentes".

He visto a algunas personas citar la respuesta anterior como una razón para "nunca usar referencias" y quiero dar mi opinión (así como a algunos otros desarrolladores de React con los que he hablado).

El sentimiento de "no usar referencias" es correcto cuando se habla de usarlos para instancias de componentes. Es decir, no debe usar referencias como una forma de tomar instancias de componentes y llamar a métodos en ellas. Esta es la forma incorrecta de usar las referencias y es cuando las referencias van al sur rápidamente.

La forma correcta (y muy útil) de usar las referencias es cuando las usa para obtener algún valor del DOM. Por ejemplo, si tiene un campo de entrada que adjunta una referencia a esa entrada, entonces tomar el valor más tarde a través de la referencia está bien. Sin esta forma, debe pasar por un proceso bastante orquestado para mantener su campo de entrada actualizado con su estado local o su tienda de flujo, lo que parece innecesario.

Edición de 2019: Hola amigos del futuro. Además de lo que mencioné hace unos años ^, con React Hooks, las referencias también son una excelente manera de realizar un seguimiento de los datos entre renderizaciones y no se limitan a solo tomar nodos DOM.

TL; DR En términos generales, refsvaya en contra de la filosofía declarativa de React , por lo que debe usarlos como último recurso. Úselo state / propssiempre que sea posible.

Para entender dónde usa refsvs state / props, veamos algunos de los principios de diseño que sigue React.

Según la documentación de React sobrerefs

Evite el uso de referencias para cualquier cosa que pueda hacerse de forma declarativa.

Principios de diseño de Per React sobre las escotillas de escape

Si algún patrón que sea útil para crear aplicaciones es difícil de expresar de manera declarativa, proporcionaremos una API imperativa para ello. (y enlazan a las referencias aquí)

Lo que significa que el equipo de React sugiere evitar refsy usar state / propspara cualquier cosa que se pueda hacer de manera reactiva / declarativa.

@Tyler McGinnis ha proporcionado una muy buena respuesta , indicando también que

La forma correcta (y muy útil) de usar las referencias es cuando las usa para obtener algún valor del DOM ...

Si bien puede hacer eso, estará trabajando en contra de la filosofía de React. Si tiene valor en una entrada, seguramente proviene de state / props. Para mantener el código coherente y predecible, también debes ceñirte a state / propsél. Reconozco el hecho de que a refsveces te da la solución más rápida, por lo que si haces una prueba de concepto, rápido y sucio es aceptable.

Esto nos deja con varios casos de uso concretos pararefs

Administrar el enfoque, la selección de texto o la reproducción de medios. Activación de animaciones imperativas. Integración con bibliotecas DOM de terceros.

Esta publicación es antigua.

Compartiré mi pequeña experiencia en un caso sobre ese tema.

Estaba trabajando en un componente grande (414 líneas) con muchas entradas 'dinámicas' y muchos datos en caché involucrados. (No estoy trabajando solo en la página, y mis sentidos me dicen que la estructura del código probablemente podría dividirse mejor, pero no es el punto (bueno, podría serlo, pero estoy lidiando con eso)

Primero trabajé con el estado para manejar los valores de las entradas:

  const [inputsValues, setInputsValues] = useState([])
  const setInputValue = (id, value) => {
    const arr = [...inputsValues]
    arr[id] = value
    setInputsValues(arr)
  }

y por supuesto en las entradas:

value={inputsValues[id] || ''}
onChange={event => setInputValue(id, event.target.value)}

El renderizado era tan pesado que el cambio de entrada estaba entrecortado como **** (no intente mantener la tecla presionada, el texto solo aparecerá después de una pausa)

Estaba seguro de que podría evitar esto usando refs.

terminó así:

  const inputsRef = useRef([])

y en las entradas:

ref={input => (inputsRef.current[id] = input)}

[Bueno, en mi caso, la entrada fue Material-UI TextField, por lo que fue:

inputRef={input => (inputsRef.current[id] = input)}

]

Gracias a esto, no hay re-renderización, la entrada es fluida, la funcionalidad funciona de la misma manera. Ahorrará ciclos y cálculo, y también energía. Hazlo por la tierra x)

Mi conclusión: useRef para el valor de las entradas incluso puede ser necesario.