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?