Integración de ganchos de React en componentes de clase React existentes

Como ha notado, los ganchos de React ofrecen un enfoque alternativo para administrar el estado y la lógica en Reaccionar aplicaciones. Sin embargo, es posible que desee migrar gradualmente sus componentes existentes basados ​​en clases para aprovechar las ventajas de los ganchos.

Afortunadamente, existe una solución a este desafío: los componentes de orden superior (HOC). Los HOC proporcionan una manera de envolver su componente de clase con una función que inyecta funcionalidad basada en ganchos.

Crear un HOC con ganchos

Para crear un HOC que integre un React gancho, siga estos pasos:

1. Defina una función que tome su componente de clase como argumento.
2. Dentro de esa función, cree un nuevo componente llamado WrappedComponent.
3. Dentro de WrappedComponent, use el gancho de React deseado para extraer y utilizar el estado o la lógica necesarios.
4. Pase el valor de retorno del gancho como accesorios al componente de clase.
5. Devuelva WrappedComponent desde la función HOC.

Ejemplo:

Supongamos que tiene un componente de clase llamado MyDiv:

class MyDiv extends React.component {
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return 
{this.state.sampleState}
   }
}

Para agregar un estado basado en ganchos a MyDiv, puede crear un HOC:

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return ;
  }
}

Integrando el HOC

Ahora, puede empaquetar su componente de clase MyDiv con el HOC withMyHook:

class MyComponent extends React.Component {
  render(){
    const myHookValue = this.props.myHookValue;
    return 
{myHookValue}
;
  }
}

export default withMyHook(MyComponent);

Al utilizar esta técnica, puede integrar gradualmente los ganchos de React en su código base existente basado en clases sin una refactorización significativa.