즐거운 시간을 보내세요
12736 단어 reactbraziliandevsjavascriptwebdev
handle
quando ele é chamado em um evento, tipo chamar de handleClick
um método chamado num evento de click, handleChange
quando lidamos com o evento change e assim por diante.마스 아드빈하?! Isso é o Crime do Crime!
O nomes dos nossos métodos ficam sem significado, o nome não diz nada sobre a função do método, só é dito quando ele é disparado, não o que ele de fato faz!
Suponhamos que temos que trabalhar em uma loja de roupas e precisamos dar manutenção neste componente, o que acontece quando clico nos botões?
function MyComponent() {
/.../
return (
<>
<button name="short" onClick={handleClick}> Short </button>
<button name="medium" onClick={handleClick}> Medium </button>
<button name="big" onClick={handleClick}> Big </button>
<button name="bigger" onClick={handleClick}> Bigger </button>
</>
)
}
Teria que ler a implementação do
handleClick
Pra poder responder essa pergunta, apenas com a informação atual o máximo que podemos fazer é supor de forma bem branda o que acontece ao clicar no botão, mas não temos quase nenhuma certeza!Mas fazendo apenas ajustando o nome da função, fica claro o que acontece ao clicar no botão
function MyComponent() {
/.../
return (
<>
<button name="short" onClick={applySearchFilter}> Short </button>
<button name="medium" onClick={applySearchFilter}> Medium </button>
<button name="big" onClick={applySearchFilter}> Big </button>
<button name="bigger" onClick={applySearchFilter}> Bigger </button>
</>
)
}
Com uma simples alteração nome da função e apenas lendo o
return
Do componente podemos saber o que está acontecendo, sem precisar ir na função, entender a lógica lá pra poder saber o que acontece. O código está claro quanto ao que ele faz, é explícito como deve ser.📝 참고
Existe apenas um caso que faz algum sentido chamar a função handler de
handle
, e é quando, em casos muito raros, função precisa fazer mais de uma coisa. Nesse caso chamar de handle
é o meio genérico de chamar o método e, dentro dele, chamamos os 2 ou mais métodos necessários.예를 들어, suponhamos que o pessoal de produto acordou, caiu da cama, bateu a cabeça no chão e quer que quando o usuário mudar o filtro de busca o site mude de cor completamente, ai faz sentido usar
handleClick
function MyComponent() {
function handleClick(e) {
applySearchFilter(e);
changeSiteColor(e);
}
return (
<>
<button name="short" onClick={handleClick}> Short </button>
<button name="medium" onClick={handleClick}> Medium </button>
<button name="big" onClick={handleClick}> Big </button>
<button name="bigger" onClick={handleClick}> Bigger </button>
</>
)
}
E se nomearem a função de forma errada?
Esse tipo de coisa precisa ser percebida e corrigida o quanto antes, se essa má nomeação te levou ao erro, você tem o dever de ajustar o nome da função para prevenir que futuros devs sejam induzidos ao erro também!
É legal também tirar print do git 비난 e colocar no grupo da empresa
Reutilização 레기벨
Usando esse método de nomenclatura ainda por cima ganhamos a semântica de poder reutilizar a função usada no evento mantendo a leitura do código limpa!
Suponhamos que nos exemplos anteriores, por algum motivo, outro método precisa chamar a função
applySearchFilter
function MyComponent() {
function applySearchFilter(e) { /.../ }
function updateSearchText(e) {
applySearchFilter(e);
}
return (
<>
/.../
<button name="short" onClick={applySearchFilter}> Short </button>
<button name="medium" onClick={applySearchFilter}> Medium </button>
<button name="big" onClick={applySearchFilter}> Big </button>
<button name="bigger" onClick={applySearchFilter}> Bigger </button>
</>
)
}
Dessa forma podemos ler de forma falada dizendo que "após atualizar o texto de busca o filtro é aplicado"ao invés de dizer "após atualizar o texto de busca lidamos com o click"
Tem uma fala de Grady Booch que eu gosto muito
Um código limpo é simples e direto. Ele é tão bem legível como uma prosa bem escrita.
💡 팁
📚 참고문헌
Vozes da minha 카베사
Clean Code - Uncle Bob
Reference
이 문제에 관하여(즐거운 시간을 보내세요), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alecell/diga-o-que-a-funcao-faz-429g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)