O React é indiscutivelmente a tecnologia de front-end mais amada. Uma das razões para esse sucesso é, sem dúvida, a pequena superfície da API do React, que cresceu nos últimos anos, mas ainda pode ser aprendida em apenas algumas horas.
Mesmo que a API do React seja pequena, muitos desenvolvedores argumentam que as partes internas do React não são apenas muito complicadas, mas precisam ser conhecidas atualmente. Então, naturalmente, surge a pergunta-faz diferença que React seja uma caixa preta? Isso nos ajuda ou nos afeta negativamente?
Neste artigo, explorarei os meandros do modelo de abstração do React em busca de uma resposta.
API externa do React
Em muitos casos de uso, a API externa do React é praticamente inexistente. Se escrevermos JSX assim:
const element=Olá!;
Ou assim:
Componente
const=({crianças})=> ( <> Eu sou um componente
{crianças}
);
Então, isso é transpilado em uma chamada para jsx do módulo react/jsx-runtime . Mesmo antes de a nova transformação JSX ser introduzida, tudo o que precisávamos fazer era trazer React , como:
import * as React from'react'; elemento const=Olá!;
E um transpiler como Babel ou TypeScript o teria transformado para chamar React.createElement .
Portanto, já podemos ver que a API mais importante do React está praticamente oculta. Com createElement ou jsx sendo usado implicitamente, nunca chamamos a API externa explicitamente.
Agora, excluindo APIs mais “clássicas”, como Component ou PureComponent (incluindo seu ciclo de vida), sabemos que o React oferece muito mais do que podemos desejar (ou precisa mesmo) para usar. Por exemplo, usar lazy para recursos de carregamento lento (por exemplo, para divisão de pacote) é muito legal, mas requer um limite de Suspense .
Por outro lado, temos APIs como useState e useEffect que trazem uma certa mágica. Primeiro, todas são funções, mas não podem ser usadas em qualquer lugar. Eles só podem ser usados dentro de um componente e apenas quando são chamados (ou seja, renderizados) a partir do React. Mesmo assim, eles podem não se comportar exatamente como esperamos.
Estas são APIs que vazam bastante. Para entendê-los, precisamos ter uma compreensão bastante sofisticada do que acontece dentro do React-o que nos leva à API interna.
React’s dentro da API
Existem três tipos de APIs internas:
- APIs que geralmente são implementadas apenas por algumas bibliotecas (como a API de reconciliação-mais sobre isso mais tarde)
- APIs que às vezes podem ser úteis e acessíveis, mas não estáveis, externamente
- APIs que não podem ser alcançadas de fora; eles são (e podem) ser usados apenas internamente
Não quero me concentrar no número 3 acima, pois está fora de nosso alcance. Ir para o segundo lugar também não faz muito sentido, pois eles estão sempre sujeitos a mudanças e devem ser evitados. O que nos deixa com APIs que são implementadas por apenas algumas bibliotecas, mas têm algum impacto.
Conforme mencionado anteriormente, o mais importante a implementar é a API de reconciliação. Uma implementação disso é fornecida pela função render de react-dom . Outro exemplo é renderToString de react-dom/server . Qual é a diferença?
Vamos considerar um componente mais complexo (mas ainda simples):
const Component=()=> { const [color, setColor]=useState ('branco'); useLayoutEffect (()=> { document.body.style.backgroundColor=color; }, [cor]); Retorna ( <> Selecione sua cor de fundo preferida.
setColor (e.target.value)} valor={color}> );
};
Existem partes sobre este componente que o tornam menos trivial de usar em diferentes opções de renderização. Primeiro, obviamente usamos o DOM diretamente, embora apenas no efeito de layout. Em segundo lugar, usamos um efeito-e um efeito especial (“efeito de layout”).
Usar o DOM diretamente deve ser evitado tanto quanto possível, mas, como visto no exemplo acima, às vezes perdemos os métodos certos para fazer as coisas de maneira diferente. Para melhorar a situação, ainda poderíamos proteger esta linha assim:
if (typeof document!=='undefined') { document.body.style.backgroundColor=color;
}
Ou use alguma verificação alternativa.
Isso ainda nos deixa com useLayoutEffect . Este é altamente específico de renderização e pode nem existir. Por exemplo, usando a função renderToString , obteremos um erro quando usarmos este Gancho.
Uma possibilidade, é claro, é voltar ao padrão useEffect . Mas então precisamos saber a (não tão óbvia) diferença entre esses dois . Em qualquer caso, o when da execução de useEffect é tão nebuloso quanto a estratégia de re-renderização de chamar o setter retornado de uma instância useState .
Vamos usar esta chance para voltar um pouco e explorar por que nos importamos com isso.
Por que devemos nos preocupar se React é uma caixa preta?
Abstrações são úteis, abstrações são legais e, claramente, abstrações nos tornam mais produtivos. Afinal, em vez de nos preocuparmos com todos os detalhes de baixo nível, podemos ser muito mais expressivos e lidar apenas com os blocos de construção relevantes para resolver uma tarefa específica.
Mas abstrações também podem criar problemas. Às vezes, eles são muito restritivos. Às vezes, eles escondem detalhes importantes. Às vezes, eles são muito teimosos.
No caso do React, isso é um problema. Se precisarmos pensar sobre todos os casos extremos (não tão visíveis) ao criar um componente, isso é bastante complicado. Desejamos legibilidade. E uma coisa que é urgentemente necessária para isso é ser capaz de raciocinar sobre o comportamento apenas olhando para um componente.
Nas palavras de Jared Palmer :
Lembre-se de que o React deve cuidar do”como”para que possamos nos concentrar no”o quê”de nossos aplicativos.
Perder esse aspecto significa perder um dos principais atributos que tornaram o React tão forte em primeiro lugar. Claro, há muito debate sobre se os Hooks realmente tornam o React mais complicado ou se alguém simplesmente teve uma impressão errada sobre o React em primeiro lugar.
No entanto, tais discussões são na verdade argumentos a favor de uma complexidade crescente. Se o princípio da menor surpresa for violado (mesmo para apenas uma minoria), já é um problema-talvez não um grande problema, mas ainda é um problema.
Conseqüentemente, o motivo pelo qual nos preocupamos com o fato de o React se tornar mais difícil de entender é que isso irá introduzir debates desnecessários, bugs sutis e maior necessidade de treinamento. Tudo isso é contraproducente e diminuirá nossa eficiência.
Encontrar o equilíbrio certo entre”Ei, essa coisa é mágica”e”Ah, não esperava que funcionasse assim”é crucial. Claro, muitos de nós podem querer estar do lado mágico das coisas, mas, na realidade, existem diferentes percepções. E no final do dia, seria bom apenas tê-lo funcionando.
No futuro, o React se tornará ainda mais complicado. Com o modo concorrente React , obteremos outro modo de renderização que pode mudar drasticamente dependendo da estrutura interna de nossos componentes. Bugs e comportamentos indesejados irão atacar novamente.
Ainda não está claro quanta confusão os componentes do servidor React irão adicionar. Pelo menos na RFC, as regras estabelecem algumas restrições que precisam ser conhecidas:
Embora o React fique mais poderoso, também fica mais complicado-isso é inegável. Sim, parte dessa complexidade deveria ser conhecida de antemão de qualquer maneira, mas aparentemente, era opcional na maioria dos casos; agora é necessário para muitos casos.
Conclusão
A força do React também é, até certo ponto, sua fraqueza. A bela abstração funciona desde que conheçamos as regras do jogo. Qualquer coisa além disso leva a um comportamento surpreendente e potencialmente indesejado.
Claramente, abrir coisas como o algoritmo de reconciliação é o que torna o React tão poderoso, mas precisamos ter algum conhecimento e disciplina para poder usar diferentes opções de renderização.
Usar os Ganchos corretamente é outra área em que o sistema de caixa preta do React pode ser muito opaco para entender totalmente o que está acontecendo. No entanto, pessoalmente, acho que as escolhas e o design valem a pena. No final, o modelo de programação do React traz produtividade e alegria para os desenvolvedores-algo que vale a pena preservar.
Quais são seus pensamentos? O React é uma caixa preta muito grande ou a quantidade de magia está bem ajustada?
A postagem React é uma caixa preta. Por que isso é importante? apareceu primeiro no LogRocket Blog .
