No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Creando tu primer HOC

13/19
Recursos

Aportes 19

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Es un tema muy complejo, a煤n no se me ocurre nada para aplicarlo y as铆 complicarme la vida jejejej :p

Aqui dejo un codigo de ejemplo

function App(props) {
  return (
    <h1>!{props.saludo}, {props.nombre}隆</h1>
  );
}

function withSaludo(WrapperdComponent) {
  return function WrapperdComponentWithSaludo(saludo) {
    return function ComponenteDeVerdad (props) {
      return (
        <React.Fragment>
          <WrapperdComponent {...props} saludo={saludo}/>
          <p>Estamos acompa帽amdo al WrapperdComponent</p>
        </React.Fragment>
      );
    }
  }
}

const AppwithSaludo = withSaludo(App)
const AppwithSaludo2 =AppwithSaludo('Buenass');
const AppwithSaludo3 =AppwithSaludo('Buenass amigos');



ReactDOM.render(
  <React.Fragment>
    <AppwithSaludo2 nombre={"Alex"} />
    <AppwithSaludo3 nombre={"jose"} />
  </React.Fragment>,
  document.getElementById('root')
);

Esto me recuerda demasiado a los decoradores de Python (:

Es una forma de herencia en componentes funcionales, la difefrencia al no usar children, es que un children lo redderizas dentro de otro contexto, en el caso de un compoente hoc cuando lo renderizar puedes usar los metodos del compoenente padre, ya que al final elhoc es un clousure

si alguien necesita un repaso de hof. este dev tiene una forma interesante de explicar

https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84

Si alguien quiere hacer esto con TypeScript esta es la mejor forma que se me ocurre lo he hecho con gen茅ricos para que se adapte a cualquier componente

  • Primero creamos el componente App que este no tiene ning煤n misterio solo pasarle el tipado como cualquier componente en TypeScript
type App2Props = {
  name?: string;
  greeting?: string;
}

function App2(props: App2Props) {
  return (
    <h1>{props.greeting}, {props.name}!</h1>
    );
}
  • Este ser铆a el primer componente que creamos solo con un wrapper:
function withWhatever<T>(Component: ComponentType<T>) {
  return function ComponenteDeVerdad(hocProps: T) {
    return (
      <>
        	<Component {...hocProps}/>
        	<p>Estamos acompa帽ando al wrapped component</p>
      	     </>
    );
  }
}

const AppWithWhatever = withWhatever(App2)
  • Y este con dos wrapper:
function withSaludo<T>(Component: ComponentType<T>) {
  return function WrappedComponentWithGreeting(greeting: string) {
    return function ComponenteDeVerdad(hocProps: T) {
      return (
        <>
         		<Component {...hocProps} greeting={greeting}/>
         		<p>Estamos acompa帽ando al wrapped component</p>
                 </>
      );
    }
  }
}

const AppWithSaludo = withSaludo(App2)("Hola")
  • En el render es exactamente igual que en JavaScript:
ReactDOM.render(
  <React.StrictMode>
    	<AppWithWhatever name="Jairo" greeting="Hola"/>
    	<AppWithSaludo name="Jairo" />
    </React.StrictMode>,
  document.getElementById('root')
);

Enamorado de esta clase!! que incre铆ble lo que se puede aprender en una tarde de domingo!

Esta clase me encanto, no se pero esta genial!


function greeting(props) {
    return (<h1 className="block">Hi! {props.name} </h1>)
}


function withHi(WrappedComponent) {
    return function (Companion) {
        return function (props) {
            return (
                <React.Fragment>
                    <WrappedComponent {...props}/>
                    <Companion {...props}/>
                </React.Fragment>
            );
        }
    }

}

function CompanionComponent(props) {
    return (<h1 className="inline">I'm your companion, {props.name}</h1>)
}


const Hi = withHi(greeting)(CompanionComponent);


function App() {
    return (
        <div className="text-center text-white">
            <Hi name="Ricardo"/>
        </div>
    );
}

const root = document.getElementById('root');
ReactDOM.render(
    <App/>,
    root
);

Ah caray!!!

Es un tema que se parece a la composicion funcional en matematicas, entonces pueden entenderlo tambien asi.

Commit de la clase, por si alguien quiere hechar un ojo directamente al codigo, es m谩s facil cuando se ve de golpe el resultado y despues se analiza el funcionamiento.

https://github.com/NightDreams/curso-react-patrones-render/commit/2cdbc86246aaae9d940c6361a5960fe8835b02e4

Para entender mejor este tema pueden revisar el concepto de Closures. Es de mucha ayuda para entender el porqu茅 estas funciones 鈥渞ecuerdan鈥 el valor con el que se le llam贸 a su padre.

Que buena clase, Todo quedo muy claro y bien explicado

Like si te gusta complicar las funciones aunque solo sea para para practicar tus super poderes

loooool

const App =({name, sur})=> <h1>hola {name} {sur}</h1>


ReactDOM.render(

  <App {...{name: "JuanDc", sur: "with objects"}} />, 

document.getElementById("root"));

podemos tambi茅n pasar 2 o mas componentes a nuestro HOC

function App (props){
  return (
      <p>{props.saludo} {props.nombre}</p>
    )
}
function App2 (props){
  return (
    <p>soy {props.other}</p>
  )
}

function HOC (Component){
  return function (Other){
    return function (saludo){
      return function (props){
        return (
          <>
            <Component {...props} saludo={saludo} />
            <Other {...props} />
            <h2>soy un texto</h2>
          </>
        )
      }
    }
  }
}

const MyComponent = HOC(App)(App2)('hey')


ReactDOM.render(
    <MyComponent nombre={'juan!'} other={'cualquier otro componente'}/>, 
    document.getElementById('root')
);


en el navegador ver铆amos algo as铆:
.
.
hey juan!
soy cualquier otro componente
soy un texto

Muy interesante, pero** 驴En qu茅 ayudar铆a aplicar esto en mis proyectos sera para una mejor estructura, buenas pr谩cticas 贸 quizas el performance?** 馃馃

Segun como yo lo entiendo con el HOC podemos llamar dos funciones a la misma vez, Las dos se encargan de hacer cosas diferente pero llega un tiempo en que debe de unirser para entregar un resultado en comun. Me equivoco?

interesante鈥 estan chetadas

const App =( {name, sur}={} )=> <h1>hola {name} {sur}</h1>

const hoc =(WC)=> (props)=> { return ( <>
    <WC {...{name: "JuanDc", sur: "with objects"}} />
    <h2> acompa帽ando a wc </h2>
    </>
  )
}

const Wrapper = hoc(App);

ReactDOM.render(

  <Wrapper />,
  
document.getElementById("root"));