reactjs - secundarios - importancia de los bioelementos

Reaccionar: el componente principal vuelve a representar todos los elementos secundarios, incluso aquellos que no han cambiado con el cambio de estado

Question

No he podido encontrar una respuesta clara a esto, espero que esto no sea repetitivo.

Estoy usando React + Redux para una aplicación de chat simple. La aplicación está compuesta por un componente InputBar, MessageList y Container. El contenedor (como se puede imaginar) envuelve los otros dos componentes y está conectado a la tienda. El estado de mis mensajes, así como el mensaje actual (el mensaje que el usuario está escribiendo actualmente) se encuentra en la tienda de Redux. Estructura simplificada:

class ContainerComponent extends Component {
  ...
  render() {
    return (
      <div id="message-container">
        <MessageList 
          messages={this.props.messages}
        />
        <InputBar 
          currentMessage={this.props.currentMessage}
          updateMessage={this.props.updateMessage}
          onSubmit={this.props.addMessage}
        />
      </div>
    );
  }
}

El problema que tengo ocurre cuando actualizo el mensaje actual. La actualización del mensaje actual desencadena una acción que actualiza la tienda, que actualiza los accesorios que pasan por el contenedor y regresan al componente InputBar.

Esto funciona, sin embargo, un efecto secundario es que mi componente MessageList se vuelve a procesar cada vez que esto sucede. MessageList no recibe el mensaje actual y no tiene ningún motivo para actualizar. Este es un gran problema porque una vez que MessageList crece, la aplicación se vuelve notablemente más lenta cada vez que se actualiza el mensaje actual.

Intenté configurar y actualizar el estado del mensaje actual directamente dentro del componente InputBar (ignorando así por completo la arquitectura Redux) y eso "soluciona" el problema; sin embargo, me gustaría seguir con el patrón de diseño de Redux, si es posible.

Mis preguntas son:

• Si se actualiza un componente primario, ¿React siempre actualiza todos los hijos directos dentro de ese componente?

• ¿Cuál es el enfoque correcto aquí?

Answer 1

Si se actualiza un componente primario, ¿React siempre actualiza todos los hijos directos dentro de ese componente?

No. React solo volverá a renderizar un componente si shouldComponentUpdate() devuelve true . De forma predeterminada, ese método siempre devuelve true para evitar cualquier error sutil para los recién llegados (y como William B señaló, el DOM no se actualizará a menos que algo cambie, disminuyendo el impacto).

Para evitar que su subcomponente se shouldComponentUpdate innecesariamente, debe implementar el método shouldComponentUpdate de tal forma que solo devuelva true cuando los datos realmente han cambiado. Si this.props.messages es siempre la misma matriz, podría ser tan simple como esto:

shouldComponentUpdate(nextProps) {
    return (this.props.messages !== nextProps.messages);
}

También es posible que desee hacer algún tipo de comparación profunda o comparación de los ID de mensajes o algo así, depende de sus requisitos.