사우다카오

Seja muito bem vindo, seja muito bem vinda ao #FullstackElxpro

Aqui nós discutimos as estratégias e dicas de sua jornada de aprendizado em Elixir. Isso é do zero até a sua primeira vaga como desenvolvedor elixir

Eu sou o Gustavo e o tema de hoje é: Hooks como utilizar에 대한 Descubra como utilizar com Phoenix e Liveview

_ps: Voce Pode acompanhar o artigo com o video

Quer aprender mais sobre elixir em um canal do Telegram?
https://elxpro.com/elxcrew-org-yt-descr

또 Hooks com Liveview?

O hook nada mais e do que um "gancho", onde voce pode enviar eventos para o servidor e 그 반대.

Qual a Diferença entre Hooks e Liveview no dia a dia?

후크의 주요 차이점은 브라우저에서 프론트엔드/백엔드를 사용하여 Elixir를 사용하는 것, Elixir를 사용하는 것, 라이브뷰에서 새로운 페이지를 사용하는 것입니다. Mas a maior diferenca e que no dia a dia o Liveview se encarrega de quase todo esse trabalho o Hook e uma maneira onde voce precisa de manipular o DOM para algo bem especifico que utilizando liveview seria quase impossivel. O exemplo mais comum e ouvir a pagina e esperar que ao chegar no fim, carregar novos elementos, o Javascript te da esse recurso muito facil o hook vai te ajudar a enviar para o seu servidor. Outro example seria manipular um mapa, acessar recursos de geolocalizacao, bluetooth, wifi entre outros apenas com o browser, eo hooks vai te ajudar nesses processsos. Enquanto o Liveview vai ficar responsavel pelo trabalho cotidiano como, CRUD, Realtime, tabelas, notificacoes, interacao backend e frontend comum.

Hooks가 중요한 이유는 무엇입니까?

가장 좋은 방법은 다음과 같습니다. 브라우저에서 브라우저를 사용할 수 있으므로 Javascript에서 후크를 사용할 수 있으므로 Liveview와 Elixir를 기능으로 유연하게 사용할 수 있습니다.

Hooks를 사용하는 데 유리한 이유는 무엇입니까?

Na minha experiencia a principal vantagem e acessar os recursos do computador como: Geolocalizacao, Bluetooth, wifi... entre outros e voce pode conferir com as imagens abaixo.

지리적 위치

https://www.w3schools.com/html/html5_geolocation.asp

console.log(navigator)

왜 왔니?

O primeiro passo e semper entender quando ha a necessidade do hook, entendendo a necessidade eo liveview nao consegue suprir, comece com um hook vide a documentacao

os elementos principais de um Hook 확인

Os elementos principais de um hook sao: id e phx-hook="HookName"은 이미지 abaixo를 따릅니다:

<input type="text" name="mirror[id]" id="mirror-id" phx-hook="MirrorValues" class="border " />

<div id="mirror"></div>

Apos a definicao o voce vai receber o primeiro erro no seu 브라우저는 이미지 abaixo를 준수합니다:

Crie uma estrutura de 파스타 파라 후크 e Crie o seu hook

자산/js/app.js는 후크를 사용할 가능성이 있다고 외칩니다. O ideal e semper deixar hooks em pasta pois pode se tornar uma bagunca.



Apos definir a chamada do arquivo de hooks, o interessante e criar um arquivo para semper apontar os hooks como voce pode ver a imagem, na 파스타 hooks criar os hooks. Veja a imagem abaixo.



E agora criar o hook como foi definido no input como MirrorValues ​​e agora e so chamar a classe Js,



O que foi criar e simplemente uma funcao com o nome do Hook, onde chama o mounted que e executado quando o nosso elemento esta adicionado na nossa tela.

E o que nosso hook faz nao e nada mais nada menos que simplemente pegar o dado do input e incluir em uma tag div.mirror

Hooks não é bom에 어떤 예외가 있습니까?

이 표시는 Liveview 표시를 대체할 수 있습니다.

마무리:

Eu espero que voce tenha gostado desse artigo e tenha te ajudado a saber quando/nao utilizar hooks :D

Redes Sociais: