Minha jornada React começou há quatro anos com componentes funcionais e ganchos. Depois veio 'Siswe, um colega participante do bootcamp e nosso entusiasta do componente de classe residente. Enquanto todos nós colaborávamos em projetos de equipe com componentes funcionais, 'Siswe se apegava aos componentes de classe com uma lealdade inabalável.

Os componentes são os blocos de construção da sua interface de usuário (IU).

Pense neles como peças de Lego – você pode combiná-los de várias maneiras para criar estruturas complexas. Eles são pedaços de código independentes e reutilizáveis ​​que encapsulam a interface do usuário e a lógica.

Reutilizar um componente dentro de outro componente normalmente se parece com isto:

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    

      
    
  );
}

Componentes de classe e componentes funcionais são as duas principais maneiras de criar componentes no React.

import React, { Component } from 'react';

class Counter extends Component {
 constructor(props) {
  super(props);
  this.state = { count: 0 };
 }

 handleClick = () => {
  this.setState({  
 count: this.state.count   1 });
 };

 render() {
  return  
 (
   

    
You clicked {this.state.count} times
    Click me
   
  );
 }
}

export default Counter;

Este é um componente de classe, criado usando classes JavaScript que estendem a classe React.Component.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count   1);
  };

  return (
    

      
You clicked {count} times
      Click me
    
  );
}

export default Counter;

Por outro lado, este é um componente funcional, escrito como uma função JavaScript simples.

Gestão do Estado: A Diferença Central.

Os componentes da classe gerenciam seu próprio estado interno usando this.state. Normalmente é inicializado no construtor, acessado usando o objeto this.state e atualizado usando o método this.setState, conforme visto no bloco de código acima.

Os componentes funcionais eram inicialmente sem estado. Mas com a introdução dos Hooks, eles ganharam a capacidade de gerenciar o estado e a lógica do ciclo de vida. Utilizando o gancho useState para gerenciar o estado, ele retorna um par de valores: o estado atual e uma função para atualizá-lo, conforme visto acima. Isso é suficiente para um gerenciamento simples de estado. Para lógica de estado mais complexa envolvendo vários subvalores, ou quando o próximo estado depende do anterior, você deseja usar useReducer.
Por exemplo:

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count   state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    

      
Count: {state.count}
      
Step: {state.step}
       
      -
       setStep(Number(e.target.value))} />
    
  );
}

export default Counter;

Aqui, useReducer gerencia vários valores de estado e lógica de atualização complexa de uma forma estruturada e sustentável. Os ganchos são exclusivamente para componentes funcionais.

Evite a manipulação direta do objeto de estado em ambos os componentes.

Nunca modifique ou altere diretamente o objeto de estado, independentemente do tipo de componente. Em vez disso, crie um novo objeto com os valores atualizados. Essa abordagem ajuda o React a rastrear alterações com eficiência e otimizar novas renderizações.

Exemplo de componente funcional:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    

      
Name: {user.name}
      
Age: {user.age}
       handleNameChange(e.target.value)} />
    
  );
}

export default UserProfile;

Exemplo de componente de classe:

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      

        
Name: {this.state.user.name}
        
Age: {this.state.user.age}
         this.handleNameChange(e.target.value)} />
      
    );
  }
}

export default UserProfile;

Em ambos os exemplos, estamos atualizando a propriedade name do objeto user enquanto preservamos a integridade do objeto original. Isto garante que um novo objeto de estado seja criado, preservando a imutabilidade e evitando possíveis problemas com atualizações de estado. A adesão a isso garante comportamento previsível, otimizações de desempenho e depuração mais fácil.

Os componentes da classe são para lógica complexa.

• Gerenciamento de estado complexo: Ao lidar com lógica de estado complexa que requer controle refinado, os componentes de classe com this.state e this.setState podem oferecer mais flexibilidade.
• Métodos de ciclo de vida: Para componentes que dependem fortemente de métodos de ciclo de vida como componentDidMount, componentDidUpdate ou componentWillUnmount, os componentes de classe são a escolha tradicional.
• Limites de erro: Para lidar com erros em uma árvore de componentes e evitar travamentos, componentes de classe com componentDidCatch são essenciais.
• Otimização de desempenho: Em cenários específicos de desempenho crítico, PureComponent ou shouldComponentUpdate dentro de componentes de classe podem ser aproveitados.
• Bases de código herdadas: Se você estiver trabalhando em um projeto existente que depende muito de componentes de classe, pode ser mais fácil manter a consistência usando-os para novos componentes.

Os componentes funcionais são para visualizações simples.

• Componentes simples: Para componentes de apresentação com estado ou lógica mínima, os componentes funcionais costumam ser a escolha preferida devido à sua simplicidade e legibilidade.
• Gerenciamento de estado com ganchos: Aproveitar useState e useReducer em componentes funcionais fornece uma maneira poderosa e flexível de gerenciar estado.
• Efeitos colaterais: O gancho useEffect permite gerenciar efeitos colaterais como busca de dados, assinaturas ou manipulações manuais de DOM (modelo de objeto de documento).
• Otimização de desempenho: useMemo e useCallback podem ser usados ​​para otimizar o desempenho em componentes funcionais.

Deixe que as necessidades do seu componente orientem sua decisão.

A abordagem funcional é geralmente considerada mais concisa e legível, e muitas vezes é suficiente devido à simplicidade e eficiência. No entanto, os componentes de classe oferecem mais controle sobre o gerenciamento de estado e os métodos de ciclo de vida, especialmente quando se trata de lógica complexa ou otimização de desempenho. Isso significa melhor estrutura para organizar lógica complexa.

A escolha entre componentes de classe e funcionais nem sempre é clara, pois não existe uma regra rígida. Avalie os requisitos do seu componente e escolha o tipo que melhor se alinha aos requisitos do seu projeto.

Com qual componente você mais gosta de trabalhar?