Ganchos, conheça o Flutter. Inspirados no React Hooks e no artigo de Dan Abramov, Making sense of React Hooks, os desenvolvedores da Dash Overflow decidiram trazer Hooks para o Flutter.
Os widgets do Flutter se comportam de maneira semelhante aos componentes do React, como muitos dos ciclos de vida em um React componente estão presentes em um widget Flutter. De acordo com os criadores em sua página GitHub:
Ganchos são um novo tipo de objeto que gerencia os ciclos de vida de widgets. Eles existem por um motivo: aumentar o compartilhamento de código entre widgets removendo duplicatas.
A biblioteca flutter_hooks fornece uma maneira robusta e limpa de gerenciar o ciclo de vida de um widget, aumentando o compartilhamento de código entre widgets e reduzindo duplicatas no código.
Os Ganchos Flutter integrados incluem:
useEffect useState useMemoized useRef useCallback useContext useValueChanged
Neste post, vamos nos concentrar em três desses Ganchos:
O gancho useState gerencia estados locais em aplicativos O gancho useEffect busca dados de um servidor e define a busca para o estado local O gancho useMemoized memoriza funções pesadas para atingir o desempenho ideal em um aplicativo
Também aprenderemos como criar e usar ganchos personalizados de flutter_hooks também.
Agora, vamos ver como podemos instalar a biblioteca flutter_hooks abaixo.
Instalando a biblioteca flutter_hooks
Para usar o Flutter Hooks da biblioteca flutter_hooks, devemos instalá-lo executando o seguinte comando em um terminal dentro de um projeto Flutter:
flutter pub add flutter_hooks
Isso adiciona flutter_hooks: VERSION_NUMER_HERE no arquivo pubspec.yaml na seção de dependências.
Além disso, podemos adicionar flutter_hooks no seção dependencies no arquivo pubspec.yaml:
dependencies: flutter: sdk: flutter flutter_hooks:
Depois de salvar o arquivo, o Flutter instala a dependência. A seguir, importe a biblioteca flutter_hooks:
import’package: flutter_hooks/flutter_hooks.dart’;
Agora estamos prontos!
O gancho useState
Assim como useState no React, useState no Flutter nos ajuda a criar e gerenciar o estado em um widget.
O gancho useState é chamado com o estado que queremos gerenciar localmente em um widget. Este estado passa para o gancho useState como um parâmetro. Este estado é o estado inicial porque pode mudar durante o tempo de vida do widget:
estado final=useState (0);
Aqui, 0 passa para useState e se torna o estado inicial.
Agora, vamos ver como podemos usá-lo em um widget. Devemos primeiro converter o exemplo de contador do Flutter para usar useState.
Aqui está o do Flutter exemplo de contador original:
class MyHomePage extends StatefulWidget {MyHomePage ({Key key, this.title}): super (key: key); título final da string; @override _MyHomePageState createState ()=> _MyHomePageState (); } class _MyHomePageState extends State
Observe que usar o StatefulWidget torna às vezes complexa a manutenção do estado localmente em um widget. Devemos também apresentar outra classe que estende uma classe State, criando duas classes para um StatefulWidget.
No entanto, com Hooks, usamos apenas uma classe para manter nosso código, tornando-a mais fácil de manter do que StatefulWidget.
Abaixo está o equivalente do Hook:
class MyHomePage extends HookWidget {MyHomePage ({Key key, this.title}): super (key: key); título final da string; @override Widget build (contexto BuildContext) {final _counter=useState (0); return Scaffold (appBar: AppBar (title: Text (title),), body: Center (child: Column (mainAxisAlignment: MainAxisAlignment.center, children:
O exemplo Hook é mais curto do que seu contemporâneo. Antes de usar Flutter Hooks em um widget, no entanto, o widget deve estender HookWidget, que é fornecido pela biblioteca flutter_hooks.
Ao chamar useState no método de construção com 0, armazenamos o valor retornado em _counter. Este _counter é uma instância de ValueNotifier.
O estado agora é armazenado na propriedade.value do ValueNotifier. Portanto, o valor do estado _counter é armazenado em _counter.value.
useState assina o estado na propriedade.value e quando o valor em.value é modificado, o gancho useState reconstrói o widget para exibir o novo valor.
No FloatingActionButton, o _counter.value é incrementado se o botão for pressionado. Isso aumenta o estado em 1 e useState reconstrói o widget MyHomePage para exibir o novo valor.
O gancho useEffect
O gancho useEffect no Flutter é o mesmo que o gancho useEffect do React. O Gancho recebe um retorno de chamada de função como parâmetro e executa efeitos colaterais em um widget:
useEffect (() {//código de efeitos colaterais aqui.//assinatura de um fluxo, abrindo uma conexão WebSocket ou executando solicitações HTTP} );
Os efeitos colaterais podem incluir uma assinatura de stream, abertura de uma conexão WebSocket ou execução de solicitações HTTP. Eles também são feitos dentro do Gancho, então podemos cancelá-los quando um widget é descartado.
O retorno de chamada de função deve retornar uma função e é chamado quando o widget é descartado. Podemos então cancelar assinaturas ou outras limpezas nessa função antes que o widget seja removido da IU e da árvore de widgets. Outras limpezas incluem:
Cancelando a inscrição de um stream Cancelando polling Limpando tempos limite Cancelando conexões HTTP ativas Cancelando conexões WebSockets
Isso evita que conexões abertas-como HTTP, conexões WebSocket, streams abertos e assinaturas abertas-no widget fiquem presas depois que o widget que os abriu for destruído e não estiver mais na árvore de widgets:
useEffect (() {//código de efeitos colaterais aqui.//-Cancelando inscrição em um fluxo.//-Cancelando a votação//-Limpando timeouts//-Cancelando conexões HTTP ativas.//-Cancelando conexões WebSockets. return () {//limpar código}});
O retorno de chamada da função em useEffect é chamado de forma síncrona, o que significa que é chamado toda vez que o widget é renderizado ou renderizado novamente.
argumento keys para useEffect
Este Gancho também tem um segundo argumento opcional chamado chaves. O argumento keys é uma lista de valores que determinam se o retorno de chamada da função no gancho useEffect será chamado ou não.
useEffect compara os valores atuais das chaves com seus valores anteriores. Se os valores forem diferentes, useEffect executa o retorno de chamada da função. Se apenas um valor nas chaves permanecer o mesmo, o retorno de chamada da função não será chamado:
useEffect (() {//código de efeitos colaterais aqui. Return () {//código de limpeza}}, [keys]);
O gancho useMemoized
O gancho useMemoized é como useMemo no React: ele memoriza/armazena em cache a instância de objetos complexos criados a partir de uma função construtora.
Esta função passa para o useMemoized Faça um gancho e, em seguida, use as chamadas do Memorizado e armazene o resultado da função. Se um widget renderizando novamente a função não for chamado, useMemoized é chamado e seu resultado anterior retorna.
argumento keys para useMemoized
Semelhante a useEffect, o gancho useMemoized tem um segundo argumento opcional chamado as chaves:
const result=useMemoized (() {}, [keys]);
Este argumento keys é uma lista de dependências, que determinam se a função passada para useMemoized é executada quando o widget é renderizado novamente.
Quando um widget é reconstruído, useMemoized verifica suas chaves para ver se os valores anteriores mudaram. Se pelo menos um valor for alterado, o retorno de chamada da função no gancho useMemoized será chamado e o resultado renderizará o resultado da chamada da função.
Se nenhum dos valores mudou desde a última verificação, useMemoized pula a chamada do função e usa seu último valor.
Ganchos personalizados
flutter_hooks nos permite criar nossos próprios ganchos personalizados por meio de dois métodos: uma função ou classe.
Ao criar Ganchos personalizados, existem duas regras a seguir:
Usar o uso como prefixo diz aos desenvolvedores que a função é um Gancho, não uma função normal Não renderize Ganchos condicionalmente, apenas renderize o resultado do Gancho condicionalmente
Usando a função e métodos de classe, criaremos um Gancho personalizado que imprime um valor com seu valor de depuração, assim como o Gancho useDebugValue do React.
Vamos começar com o método de função.
Método de função
Para começar com o método da função, devemos criar um método usando qualquer um dos ganchos embutidos dentro dele:
ValueNotifier
No código acima, usando o gancho useState integrado mantém o estado na função e imprime o debugLabel e o valor do estado.
Podemos então retornar o estado. Portanto, usando debugLabel, o rótulo do estado é impresso no console quando o widget é montado na árvore de widgets pela primeira vez e ao modificar o valor do estado.
A seguir, vamos ver como usar o gancho useDebugValue que criado para imprimir a string debutLabel e o estado correspondente ao montar e reconstruir o widget:
final counter=useDebugValue (0,”Counter”); pontuação final=useDebugValue (10,”Pontuação”);//Contador: 0//Pontuação: 10
Método de classe
Agora, vamos usar uma classe para recriar o gancho personalizado useDebugValue. Isso é feito criando uma classe que estende uma classe Hook:
ValueNotifier
No código acima, temos a função useDebugValue, que é nosso Gancho personalizado. Ele aceita argumentos, como o valor do estado inicial initialData que o Gancho gerencia e o rótulo do estado, debugLabel.
A classe _StateHook é onde nossa lógica do Gancho é escrita. Quando a função use é chamada e passada na instância da classe _StateHook, ela registra a classe _StateHook no tempo de execução do Flutter. Podemos então chamar useDebugLabel como um Gancho.
Portanto, sempre que criar um Gancho usando o método de classe, a classe deve estender uma classe Gancho. Você também pode usar Hook.use () no lugar de use ().
Conclusão
flutter_hooks trouxe uma grande mudança em como construímos widgets Flutter, ajudando a reduzir o tamanho de uma base de código para um tamanho consideravelmente menor.
Como vimos, flutter_hooks permite que os desenvolvedores eliminem widgets como StatefulWidget, permitindo que escrevam um código limpo e fácil de compartilhar e testar.
