javascript - form - Aplicación grande(ish) que edita una gran cantidad de contenido

redux saga

Question

Estoy trabajando en una aplicación que incluye muchas entradas que son parte de un gran árbol de datos.

Los datos son similares a esto:

data: {
  input_1: "Text",
  input_2: "etc",
  ...
  input_n: "foo"
}

Cada componente de entrada recibe, como apoyo, la clave para la ubicación de los datos que se supone que debe mostrar y modificar ( <InputComponent data={data[''input_1'']} objectKey={''input_1''} onChange={this.updateData} /> ).

Hay alguna validación que ocurre dentro del componente en sí, pero básicamente this.onChange se elimina y se llama cuando se cambia el texto.

Estoy manejando onChange de una manera similar a esto:

onChange = (newInput, objectKey) => {
  const {data} = this.state;

  const newData = {
    ...data,
    [objectKey]: newInput
  };

  this.setState({
    data: newData
  });
};

Estoy notando algunas ralentizaciones y un comportamiento lento al actualizar las entradas. Esto es, al menos en la medida en que lo entiendo, porque cada componente que está "enganchado" a estos datos se está volviendo a procesar.

¿Es esto un enfoque tonto? Si es así, ¿cuál sería mejor? Todavía no es tan malo, pero anticipo que esto empeorará a medida que aumenta en tamaño / complejidad.

Answer 1

Este es mi enfoque, cualquier crítica es bienvenida ya que también estoy buscando una forma mejor para mi aplicación con un problema similar.

Haría InputComponent como PureComponent con un estado interno para el valor de entrada actual. PureComponent hará automáticamente una comparación superficial con su state . Si su InputComponent es más complejo con state consiste en matrices u objetos profundos, debe implementar manualmente su shouldComponentUpdate usted mismo.

El onChange simplemente actualizaría su estado interno, luego debounce la llamada props.onChange

onChange(val) {
  this.setState(val);
  debounce(this.props.onChange(val));
}

De esta manera, la actualización parece más suave y, después de eso, el valor de los padres también se actualiza en consecuencia sin volver a procesar y actualizar los elementos InputComponent .