Para que la aplicación sea más robusta, se debe utilizar el concepto OOP en su aplicación. Aún así, ReactJS está mejorado en sí mismo, por lo que debe seguir su principio para crear cualquier aplicación. Hoy estaremos viendo cómo y qué alternativas podemos utilizar para que nuestra aplicación esté más orientada a objetos

¿Qué es la Programación Orientada a Objetos en React?

La programación orientada a objetos es una forma de hacer que su código sea más reutilizable en aplicaciones y servicios completos. Un objeto puede interactuar con otros objetos, programas y usuarios de manera más efectiva que un objeto simple de JavaScript

¿Cómo podemos lograr esto?

Si prefiere usar componentes de clase en su aplicación, es mucho más fácil agregar métodos auxiliares y estados, pero el desafío surge cuando trabaja con componentes de funciones y ganchos. Tomemos un ejemplo para ver cuál es el bloqueador de primer nivel al usar clases regulares para el componente funcional

He creado una clase llamada Usery usando useStateen el contexto, al mismo tiempo que expongo dos métodos setNamey getNameactúo como captador y definidor para mí. Estoy recibiendo un error al usar el useStateand ie

React Hook "useState" cannot be called in a class component.
React Hooks must be called in a React function component or 
a custom React Hook function. (react-hooks/rules-of-hooks)eslint

      
                

                    
                    
                
            

const user = new User('name')
  return (
    <div className="App">
      <button onClick={() => user.setName("first name")}>click</button>
      {user.getName()}
    </div>
  );

Uso de constructor funcional para componente funcional

Como no podemos usar el constructor de clases, usaremos el constructor funcional. Las funciones no nos darán errores pero reducirán el poder que tenemos con las clases. Por ejemplo, extender será un poco complicado

Para el constructor de funciones, podemos definir propiedades y usarlas de la misma manera que lo hemos hecho para el constructor de clases. esta vez no tendremos ningún error y las cosas funcionarán sin problemas

El uso de la siguiente programación se verá como el siguiente fragmento. Después de hacer clic en cada botón veremos los cambios.

export default function App() {
  const user = new User("hello");
  return (
    <div className="App">
      <button onClick={() => user.setAge(10)}>age</button>
      <button onClick={() => user.setProfile("first profile")}>profile</button>
      <button onClick={() => user.setName("first name")}>name</button>
      <button onClick={() => user.save()}>save</button>
    </div>
  );
}

// after save click - output from log
data: Object
  name: "first name"
  age: 10
  profile: "first profile"

Los ganchos de modelo son casos de uso de ganchos en los que definimos una carpeta específicamente para modelos Usery allí mantenemos todos los métodos auxiliares necesarios y funcionará y actuará como una instancia normal con la que estamos trabajando.

La idea detrás de este tipo de ganchos es exponer todos los métodos de estado junto con los métodos auxiliares únicamente y no poner más ganchos en el contexto siempre que el componente no los necesite. Un ejemplo de tal gancho es el siguiente

La salida del siguiente gancho también es la misma que la de un constructor funcional. Hay algunos puntos adicionales que se pueden establecer son

• los ganchos solo funcionarán dentro del componente
• El constructor funcional funcionará fuera de su componente siempre que no use un estado

El uso de la programación orientada a objetos es importante para cualquier aplicación si hay muchas interdependencias que administrar y también lo ayudará a administrar su código si comienza a escalar.

Espero que aprendas algo nuevo hoy. Puede encontrar el código fuente completo en el enlace del entorno de pruebas de código . ¡Gracias y feliz codificación!

Más contenido en PlainEnglish.io . Regístrese para recibir nuestro boletín semanal gratuito . Síganos en Twitter , LinkedIn , YouTube y Discord .

¿ Interesado en escalar su inicio de software ? Visita Circuito .