reactjs - react - Diferencia entre el uso de un HOC vs.

render prop react

Question

Acabo de revisar HOC en React. Ellos son muy buenos Sin embargo, ¿el simple hecho de envolver un componente no logra el mismo resultado?

Componente de orden superior

Este simple HOC pasa el estado como propiedades al ComposedComponent

const HOC = ComposedComponent => class extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (<ComposedComponent {...this.state} />);
    }      

}

Envoltura de componentes

Este componente pasa el estado como propiedades al componente hijo

class ParentComponent extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (
        <div>
          {React.cloneElement(this.props.children, { ...this.state })}  
        </div>
      );
    }      

}

Aunque el uso es ligeramente diferente entre los dos, ambos parecen ser igualmente reutilizables.

¿Dónde está la diferencia real entre HOC y componentes de composición a través de this.props.children? ¿Hay ejemplos en los que solo se puede utilizar uno u otro? Es una mejor práctica usar HOC''s. ¿Son estas elecciones justas que tienes donde puedes elegir tu sabor preferido?

Answer 1

Los componentes de orden superior (HOC) y los componentes de contenedor son diferentes. Tienen diferentes casos de uso y resuelven problemas similares, pero diferentes.

Los HOC son como los mixins. Se utilizan para componer la funcionalidad que el componente decorado conoce. Esto se opone a los Componentes del contenedor que envuelven a los niños y permiten que los niños sean tontos (o que no estén conscientes de la funcionalidad decorada del Container).

Es cierto que al transferir accesorios, los Contenedores pueden agregar funcionalidad a sus hijos. Pero, esto suele ser en forma de accesorios que se transmiten a los niños. En Contenedores, esto también es incómodo debido a la limitación de que no puedes simplemente agregar accesorios a un Elemento ya creado:

Por lo tanto, si desea agregar un nuevo prop a un hijo de this.props.children , tendría que usar cloneElement . Esto no es tan eficiente porque significa que tienes que recrear los elementos.

Además, HOC es simplemente una forma (fábrica) de crear componentes. Por lo tanto, esto puede suceder fuera del render .

Answer 2

Solo quería agregar que cuando necesite componentes dinámicos de orden superior, el enfoque de Contenedor funciona mejor.

Si, por ejemplo, tiene 4 elementos para renderizar que podrían tener un HOC definido, le gustaría crear el Componente de orden superior dentro del render , pero dado que llamar componentes de orden superior dentro del render hace que los <HigherOrderComponent/> a montar en cada render. una muy mala idea.

Esto se documenta aquí; https://github.com/facebook/react/blob/044015760883d03f060301a15beef17909abbf71/docs/docs/higher-order-components.md#dont-use-hocs-inside-the-render-method .

Pero en general apostaría por el enfoque HOC.