Amostras de flashcards de React do nosso aplicativo

Baixe nosso aplicativo na App Store ou Google Play para obter mais flashcards gratuitos ou assine para ter acesso a todos os flashcards.

O que é JSX e por que o React o utiliza?

JSX é uma extensão de sintaxe para JavaScript que permite escrever estruturas HTML diretamente no código JavaScript. É um dos elementos fundamentais sobre os quais o React.js é construído. É por isso que o JSX é tão crucial no ecossistema React.

O React usa JSX por várias razões:

1. Limpeza de código: o JSX simplifica o processo de desenvolvimento de código, permitindo que os desenvolvedores coloquem estruturas HTML diretamente em JavaScript. Sem JSX, a criação de interfaces de usuário no React seria significativamente mais complicada.

2. Facilidade de uso: o JSX faz com que o JavaScript se pareça com o HTML, o que facilita o uso pelos desenvolvedores, especialmente aqueles já familiarizados com o HTML.

3. Segurança: o JSX protege automaticamente o código contra todos os tipos de ataques, como XSS (Cross-Site Scripting), através do encaixe único de elementos.

4. Desempenho: o código JSX é otimizado para desempenho. Ele é traduzido para a sintaxe JavaScript, que é mais rapidamente interpretada pelos navegadores da web.

Tecnicamente, JSX não é nada mais do que açúcar sintático para a função `React.createElement(component, props, ...children)`.

O que é o DOM Virtual e quais são as suas vantagens?

O Virtual DOM, ou modelo virtual do Modelo de Objeto de Documento (DOM), é um conceito utilizado em certas bibliotecas JavaScript, como o React. É uma cópia leve do verdadeiro DOM, que é mantida na memória e atualizada independentemente do verdadeiro DOM.

As principais vantagens do Virtual DOM são:

1. As atualizações são mais rápidas. O Virtual DOM é mais leve e menos operações correm através dele do que no caso do verdadeiro DOM. Como resultado, as operações de atualização são executadas mais rapidamente.

2. Reduz a carga no verdadeiro DOM. Todas as mudanças são primeiro processadas no DOM virtual, e depois, através de um processo chamado reconciliação, as mudanças selecionadas são introduzidas no verdadeiro DOM. Isso pode evitar pesadas e frequentes atualizações do DOM.

3. Otimiza o processo de renderização. React, usando Virtual DOM, é capaz de calcular a maneira mais eficiente de realizar as atualizações no verdadeiro DOM. Isso reduz a quantidade de operações necessárias e melhora o desempenho de renderização.

4. O código torna-se mais simples. Os desenvolvedores podem codificar como se toda a página estivesse sendo renderizada de novo após cada mudança. React cuida da otimização do processo para que apenas o mínimo de trabalho necessário para sincronizar o DOM virtual e real seja realizado.

O que são props e como são passadas nos componentes do React?

Props (de "propriedades") são as propriedades de componentes na biblioteca React. Eles são usados para passar dados de um componente para outro, estes são os dados que um componente recebe do componente pai e são geralmente passados quando o componente é invocado.

Os props são imutáveis, o que significa que um componente não deve modificar os valores dos props que recebe, mas apenas lê-los.

Os props são passados de uma maneira unidirecional (de cima para baixo), ou seja, de componentes pai para componentes filhos. Parece semelhante à passagem de atributos para elementos HTML.

Aqui está um exemplo de como usar props:

function Welcome(props) {
  return <h1>Bem-vindo, {props.name}</h1>;
}

function App() {
  return <Welcome name = "Christopher"/>;
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

No exemplo acima, criamos um componente `Welcome` que espera um prop `name`. Em seguida, no componente `App`, criamos uma instância do componente `Welcome` e passamos a ele um prop `name` com um valor de "Christopher". Como resultado, onde usamos o componente Welcome, o texto "Bem-vindo, Christopher" será exibido.

Explique o que é o hook useEffect e para que é utilizado.

O hook useEffect no React.js é usado para realizar efeitos colaterais em componentes funcionais. Os efeitos colaterais são tipicamente ações que não afetam diretamente a renderização do componente, mas são necessários para o seu correto funcionamento, como buscar dados de uma API, lidar com temporizadores ou limpar recursos.

Ele funciona de forma semelhante aos métodos de ciclo de vida do componente: componentDidMount, componentDidUpdate e componentWillUnmount em componentes de classe.

Podemos usá-lo em três variantes diferentes:

1. Sem um segundo argumento: O código é chamado após cada renderização.

useEffect(() => {
  console.log('Isto será executado após cada renderização');
});

2. Com uma matriz vazia como segundo argumento: O código é chamado apenas uma vez após a primeira renderização, análogo ao componentDidMount.

useEffect(() => {
  console.log('Isto será executado apenas uma vez, após a primeira renderização');
}, []);

3. Com uma matriz de dependências como segundo argumento: O código é executado após a primeira renderização e depois cada vez que o valor de qualquer dependência na matriz muda.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('Isto será executado após a primeira renderização, e sempre que "count" mudar');
}, [count]);

Em resumo, o hook useEffect permite a execução de efeitos colaterais após ou durante a renderização de componentes funcionais, o que por sua vez permite um código limpo e compreensível, garantindo a funcionalidade completa.

Flashcards de React

Amostras de flashcards de React do nosso aplicativo

O que é JSX e por que o React o utiliza?

O que é o DOM Virtual e quais são as suas vantagens?

O que são props e como são passadas nos componentes do React?

Explique o que é o hook useEffect e para que é utilizado.

Baixar IT Flashcards Agora