1

Como sabem estou ingressando nesse mundo do JavaScript/React Native... Em meus estudos reparei em alguns exemplos a forma como determinadas funções são chamadas.

  • Exemplo 1: Nesse exemplo a função onCancel é chamada quando o usuário pressiona sobre o TouchableOpacity:
<TouchableOpacity onPress={this.props.onCancel}>
    <Text style={styles.button}>Cancelar</Text>
</TouchableOpacity>
  • Exemplo 2: Nesse exemplo a função setState, que muda o estado do componente, é chamada quando o usuário pressiona sobre o TouchableOpacity, mas observem que aqui ela está presente em uma função arrow, ao contrário do exemplo 1:
<TouchableOpacity style={styles.addButton} onPress={() => this.setState({ showAddTask: true })}>
    <Icon name='plus' size={20} color={commonStyles.colors.secondary} />
</TouchableOpacity>
  • Exemplo 3:Nesse exemplo a função toggleFilter é chamada quando o usuário pressiona sobre o TouchableOpacity e assim como no Exemplo 1 a mesma não percente a uma arrow function:
<TouchableOpacity onPress={this.toggleFilter}>
    <Icon />
</TouchableOpacity>
  • Exemplo 4: Nesse exemplo a função setState, que muda o estado do componente, é chamada quando o usuário altera o conteúdo do TextInput, mas observem que aqui ela está presente em uma função arrow, ao contrário do exemplo 1:
<TextInput onChangeText={desc => this.setState({ desc })} value={this.state.desc} />
  • Exemplo 5: Nesse exemplo tenho a função getDateTimePicker que retorna um componente DateTimePicker. Como trata-se de um componente de classe logo em seguida eu retorno um JSX no render, observem que chamo o getDateTimePicker de forma direta, sem arrow function, e o mesmo irá retornar o componente DateTimePicker:
getDateTimePicker = () => {
    return (
        <DateTimePicker 
            value={this.state.date} 
            onChange={(_, date) => this.setState({ date })} 
            mode='date' 
        />
    )
}
    
render() {
   return (
        <Text style={styles.header}>Nova Tarefa</Text>                    
        {this.getDateTimePicker()}
)}

Porque às vezes chamamos funções "direto" sem parênteses, outra vezes chamamos direto com os parênteses (exemplo 5) e outra vezes colocamos dentro de arrows functions como nos exemplos acima?

1 Resposta 1

1

A explicação vai seguir pelos exemplos e resumo no final. Segue:

Exemplo 1:

<TouchableOpacity onPress={this.props.onCancel}>
   <Text style={styles.button}>Cancelar</Text>
</TouchableOpacity>

Nesse primeiro exemplo, a função onCancel é passada a referencia dela para o evento. Assim, essa função, após o evento oPress for executado, possui todos os parâmetros do evento. Se o evento onPress, estiver definido, esperando um parâmetro (event), esse parâmetro será referenciado para os parâmetro da função onCancel.

Exemplo 2:

<TouchableOpacity style={styles.addButton} onPress={() => this.setState({ showAddTask: true })}>
    <Icon name='plus' size={20} color={commonStyles.colors.secondary} />
</TouchableOpacity>

Nesse segundo exemplo, a função que é chamada ao ser executada o evento não é a setState, a função que é chamada é uma função anonima e nessa função há o procedimento para chamar a setState. Note que a função anonima chamada, ela sobrescreve quaisquer parâmetros do evento, ficando a função anonima sem parâmetros.

Exemplo 3:

<TouchableOpacity onPress={this.toggleFilter}>
   <Icon />
</TouchableOpacity>

Repete a explicação do Exemplo 1. A função toggleFilter é referenciada para o evento onPress, fazendo com que ela possua todas as características das definições do evento.

Exemplo 4:

<TextInput onChangeText={desc => this.setState({ desc })} value={this.state.desc} />

Repete a explicação do exemplo 2, com o adendo que agora a função anonima, recolhe o parâmetro da definição do evento. Ao disparar o evento a função anonima é chamada, com o atributo desc e essa função que realiza o procedimento para chamar a função setState.

Exemplo 5:

getDateTimePicker = () => {
  return (
    <DateTimePicker 
        value={this.state.date} 
        onChange={(_, date) => this.setState({ date })} 
        mode='date' 
    />
  )
 }

 render() {
    return (
      <Text style={styles.header}>Nova Tarefa</Text>                    
      {this.getDateTimePicker()}
  )}

No exemplo 5, você está criando um atributo getDateTimePicker e passando uma função anonima para ele. Essa função, ela é chamada ao se chamar o atributo, fazendo com que this.getDateTimePicker(), realize os procedimentos definidos na função anonima.


Após essa longa explicação de cada item, segue a conclusão.

Sua dúvida é divida em dois seguimentos, a passagem de referencias de funções em javascript ( Exemplo 1, Exemplo 2, Exemplo 3 e Exemplo 4) e a criação de funções e atributos (Exemplo 5).

Na passagem de funções como parâmetros para eventos, entenda que os eventos irão esperar uma função de callback para executar; essa função pode ser passada como referencia ou você pode criar uma funções anonima e executar a sua função de callback dentro dessa função (Exemplo 2 e Exemplo 4). Nessa primeira situação, o uso de callback faz com que a referencia da função seja passada diretamente para o evento, as vezes não podendo você passar um certo item que está no escopo da função para o seu callback. Em outro caso, utilizando funções anonimas você possui a liberdade para poder chamar atributos que serão executados dentro da função (Exemplo 1 e Exemplo 3). Mas nota, o callback do evento, não é a função que você está chamando ali dentro, e sim a função anonima. Você cria uma função, que ela chama a sua função.

O uso de uma ou outra, depende da situação, mas sabendo disso, espero que tenha ficado claro sobre essa passagem de funções como parâmetros.

O exemplo 5, é a criação de um atributo e passando uma função para ele e após isso, você está chamando essa função para executar, com os parenteses. Sem os parenteses seria passado a referencia dela.

No final, é entender que sem parenteses é passagem de referencia da função e com parenteses é a execução da função.

Espero ter ajudado.

3
  • Meu amigo, pode me explicar o que seria "passar uma função como referência"? 17/05/2021 às 19:43
  • 1
    Seria atribuir naquele endereço de memoria a sua função. Assim, garantindo que a sua função seja chamada quando um certo item for invocado. Por exemplo: no eventos onPress, quando você passa a referencia da função, você está passando um endereço de memoria, que invocará sua função quando o evento for acionado. 17/05/2021 às 19:50
  • Meu amigo Wesley, obrigado pelo detalhamento em suas explicações, para "fechar com chave de ouro" só me ajuda nesse trecho da sua explicação, por favor. Você diz: "Nessa primeira situação, o uso de callback faz com que a referencia da função seja passada diretamente para o evento, as vezes não podendo você passar um certo item que está no escopo da função para o seu callback." Não entendi o que quis dizer nessa parte 17/05/2021 às 21:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .