Programação Orientada a Objetos em React

Dec 21 2022

Foto de Lautaro Andreani no Unsplash

Para tornar a aplicação mais robusta deve-se utilizar o conceito de OOPs em sua aplicação. Ainda assim, o ReactJS é aprimorado por si só, então você deve seguir seu princípio para criar qualquer aplicativo. Hoje estaremos vendo como e quais alternativas podemos utilizar para tornar nossa aplicação mais orientada a objetos

O que é Programação Orientada a Objetos em React?

A programação orientada a objetos é uma maneira de tornar seu código mais reutilizável em aplicativos e serviços inteiros. Um objeto pode interagir com outros objetos, programas e usuários de forma mais eficaz do que um objeto javascript simples

Como podemos conseguir isso?

Se você preferir usar componentes de classe em seu aplicativo, é muito mais fácil adicionar métodos auxiliares e estados, mas o desafio surge quando você está trabalhando com componentes de função e ganchos. Vamos dar um exemplo para ver qual é o bloqueador de primeiro nível no uso de classes regulares para o componente funcional

Eu criei uma classe chamada Usere usando useStateno contexto, ao mesmo tempo em que expus dois métodos setNamee getNameatuei como um getter e setter para mim. Estou recebendo um erro ao usar o useStatee 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

      
                
                    
                    
       User class with useState

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

Usando construtor funcional para componente funcional

Como não podemos usar o construtor de classe, usaremos o construtor funcional. As funções não nos darão erros, mas reduzirão o poder que temos com as classes. Por exemplo, estender será um pouco complicado

Para o construtor de função, podemos definir propriedades e usá-las da mesma forma que usamos para o construtor de classe. desta vez não teremos erros e as coisas funcionarão sem problemas

Construtor funcional

O uso da programação a seguir será semelhante ao trecho abaixo. Depois de clicar em cada botão, veremos as alterações

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"

Ganchos de modelo são casos de uso de ganchos em que definimos uma pasta especificamente para modelos Usere lá mantemos todos os métodos auxiliares necessários e ele executará e agirá como uma instância regular com a qual estamos trabalhando.

A ideia por trás desses tipos de ganchos é expor todos os métodos de estado junto com os métodos auxiliares apenas e não colocar mais ganchos no contexto, desde que não sejam necessários para o componente. Um exemplo de tal gancho está a seguir

gancho useUser para gerenciar o estado dos usuários

A saída do gancho a seguir também é a mesma de um construtor funcional. Existem alguns pontos adicionais que podem ser declarados são

ganchos só funcionarão dentro do componente
O construtor funcional funcionará fora do seu componente, desde que não esteja usando um estado

O uso de programação orientada a objetos é importante para qualquer aplicativo se houver muitas interdependências para gerenciar e também ajudará você a gerenciar seu código se ele começar a escalar.