Artigo original: https://www.freecodecamp.org/news/functional-vs-class-components-react-native/

No React Native, há dois tipos principais de componentes que compõem uma aplicação: componentes funcionais e componentes de classe. Eles são estruturados do mesmo modo que seriam em uma aplicação para a web normal do React.

Componentes de classe

Os componentes de classe são classes do JavaScript ES2015 que estendem uma classe base do React chamada Component.

class App extends Component {
    render () {
        return (
            <Text>Hello World!</Text>
        )
    }
}

Isso dá para a classe App acesso aos métodos do ciclo de vida do React, como render, bem como às funcionalidades de state/props dos componentes pai.

Componentes funcionais

Os componentes funcionais são mais simples. Eles não gerenciam seu próprio state nem têm acesso aos métodos de ciclo de vida fornecidos pelo React Native. Eles são, literalmente, funções do JavaScript antigas e simples – às vezes, chamados de componentes sem estado (do inglês, stateless).

const PageOne = () => {
    return (
        <h1>Page One</h1>
    );
}

Sumário

Os componentes de classe são usados como componentes de contêiner para lidar com o gerenciamento do state e para integrar componentes secundários.

Os componentes funcionais geralmente são usados apenas para fins de exibição – esses componentes chamam funções dos componentes pai para lidar com interações do usuário ou atualizações do state.

Mais informações sobre o estado do componente

Estado do componente

Nos componentes Class, há uma maneira de armazenar e gerenciar o state criado no React Native.

class App extends Component {
  constructor () {
    super();
    this.state = {
      counter: 0
    };
  }
  incrementCount () {
    this.setState({
      counter: this.state.counter + 1
    });
  }
  decrementCount () {
    this.setState({
      counter: this.state.counter - 1
    });
  }
  render () {
    return (
      <View>
        <Text>Count: {this.state.counter}</Text>
        <Button onPress={this.decrementCount.bind(this)}>-</Button>
        <Button onPress={this.incrementCount.bind(this)}>+</Button>
      </View>
    );
  }
}

O state é semelhante às props, mas é privado e totalmente controlado pelo componente. Aqui, o método constructor() chama o construtor da classe pai com super(); – Component é a classe pai do App, pois estamos usando a palavra-chave extends. O método constructor() também inicializa o objeto de state do componente:

this.state = {
  counter: 0
};

O state pode ser exibido dentro do componente:

{this.state.counter}

Ele também pode ser atualizado pela chamada:

this.setState({});

Observação: após a criação inicial no método constructor() do componente, você nunca deve modificar diretamente o state do componente com this.state =. Você deve usar this.setState, como pode ser visto nas funções incrementCount e decrementCount acima.

A contagem é ampliada e reduzida ao chamar as funções passadas para os manipuladores onPress do mesmo modo que seriam se você chamasse um manipulador de clique do JavaScript na web.

Adendo: no primeiro exemplo, <Button> é um componente personalizado; se trata de uma combinação de <TouchableOpacity> e <Text> da API do React Native:

const Button = ({ onPress, children, buttonProps, textProps }) => {
  const { buttonStyle, textStyle } = styles;
  return (
    <TouchableOpacity onPress={onPress} style={[buttonStyle, buttonProps]}>
      <Text style={[textStyle, textProps]}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

Mais informações sobre o React Native: