Entendiendo React Render Props y HOC | Programar Plus

Aquí hay una excelente publicación de Aditya Agarwal sobre la diferencia entre los accesorios de renderizado y los componentes de orden superior en React. Me gustó particularmente la demostración que eligió para explicar los dos. Pero, para resumir:

Los componentes de orden superior (HOC) toman un componente y devuelven un componente. Digamos que tiene un componente llamado Username que solo devuelve una cadena del nombre de un usuario y desea ponerlo en mayúscula en algún lugar; esta es la oportunidad perfecta para usar un HOC que envuelve eso Username componente y cambia cada carácter. Al igual que el excelente tutorial que Kingsley Silas escribió aquí sobre CSS-Tricks.

Los HOC son particularmente útiles cuando desea modificar un componente y luego usarlo en varios lugares, o para hacer pequeños lotes de código para evitar abrumar un componente con demasiadas opciones y accesorios.

Por otro lado, un accesorio de renderizado es “un accesorio de función que un componente usa para saber qué renderizar”. Al menos, eso es lo que dicen los documentos de React, pero me tomó un tiempo darme cuenta. Por lo que tengo entendido, le permite proporcionar una forma para un componente de React (generalmente uno que solo tiene un montón de datos que desea reutilizar) y dárselo a otro (es decir, un componente que luego procesa esos datos).

Aquí hay un gran ejemplo de esto en los documentos de React:

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

Lo que está sucediendo aquí es que alguien definió un Mouse componente en el código base que proporciona coordenadas x + y basadas en la posición del mouse del usuario. Esta Mouse componente luego devuelve un montón de datos que almacenamos como mouse y luego pasarlo a la Cat componente que es lo que genera algo con esos datos.

Esto es genial cuando desea reutilizar los datos de Mouse pero también cuando desea pasar muchos tipos diferentes de datos a la Cat componente. Di que quieres Cat para representar otra cosa en función del tipo de datos que le proporcione.

Entonces, para resumir: los HOC y los accesorios de renderización son dos formas de hacer un trabajo similar. Es decir, pueden dividir nuestro código en muchos bits reutilizables y animarnos a crear componentes que sean más flexibles a largo plazo.

Enlace directo →

(Visited 5 times, 1 visits today)