Como Usar Refs no React

Refs são um recurso React que permite acessar diretamente os nós DOM criados pelo método render () de um componente. Eles fornecem uma maneira de quebrar a renderização declarativa do React para que você possa chamar APIs do navegador.

Ao trabalhar com o React, você geralmente declara a aparência do DOM de um componente usando JSX:

a classe MyComponent estende React. Component & # 123;   estado = & # 123; valor: " " & # 125 ;;   handleChange = e = > this. setState & # 40; & # 123; value: e. target. value & # 125; & # 41 ;;   renderizar & # 40; & # 41; & # 123; return & # 40; < div > < h1 > Hello World! < / h1 > < input onChange = & # 123; this. handleChange & # 125; valor = & # 123; this. state. value & # 125; / > < / div > & # 41 ;; & # 125;   & # 125 ;;

Internamente, o React transpila o JSX para descobrir como manipular o DOM. Ele usará funções do navegador, como document. createElement () e document. appendChild () para criar a estrutura DOM que você declarou.

Isso simplifica drasticamente o código de que você precisa para atualizar programaticamente o DOM. Para modificar os elementos, você altera seus adereços ou atualiza o estado de um componente. O React calcula as diferenças e faz os ajustes DOM necessários.

O Caso Para Refs

Você normalmente não consegue acessar os nós DOM criados pelo React. No exemplo acima, não identificamos os elementos que criamos. Isso se torna problemático se você deseja chamar uma API DOM que não pode ser acessada declarativamente por meio de props React.

Vamos considerar o que acontece se o usuário inserir um valor inválido na entrada de texto. Se eles clicaram em enviar em um formulário real, seria uma boa ideia mostrar uma mensagem de erro e colocar o foco de volta na entrada de texto. Você não pode fazer isso sem acesso ao nó DOM de entrada. Você precisa chamar o método focus () nesse elemento.

Insira as refs. Os Refs fornecem uma maneira de primeira classe de obter uma “ referência ” aos nós DOM do React. Você pode resolver o problema do foco atribuindo um ref à entrada. Refs são objetos com uma propriedade atual que contém o nó DOM ao qual se referem.

Criando uma Ref

Geralmente, as referências são criadas explicitamente chamando React. createRef (). Em seguida, você os atribui a uma instância de componente usando a prop ref especial. Este não é um acessório real e não pode ser acessado pelo componente.

a classe DemoComponent estende React. Component & # 123;   inputRef = React. createRef & # 40; & # 41 ;;   focusInput = & # 40; & # 41; = > this. inputRef? . current. focus & # 40; & # 41 ;;   renderizar & # 40; & # 41; & # 123; return & # 40; < div > < input ref = & # 123; this. inputRef & # 125; / > < botão onClick = & # 123; this. focusInput & # 125; / > < / div > & # 41 ;; & # 125;   & # 125;

O ref é atribuído à propriedade de instância inputRef. Isso é então passado para o elemento de entrada, definindo sua prop ref. Quando o botão é clicado, o método focusInput () é chamado. Isso acessa a propriedade atual do ref, que contém o nó DOM real da entrada. Agora ele pode chamar focus () para enfocar o campo de texto.

A propriedade atual de refs pode ser nula. Isso ocorre quando o ref não é atribuído a um elemento DOM renderizado. Neste exemplo, inputRef. current será nulo até que o método render () seja chamado e a entrada pegue o ref. Por este motivo, o operador de encadeamento opcional (?.) É usado em focusInput () para lidar com o cenário onde o ref ainda não faz referência a nada.

Atribuição de referências aos componentes do React

O exemplo acima mostra como os refs funcionam quando usados ​​com elementos HTML simples. Você também pode atribuir um ref às instâncias do componente React. Isso permite que você chame diretamente métodos definidos por filhos que você renderiza.

class View extends React. Component & # 123;   estado = & # 123; error: true; // Exemplo! & # 125 ;;   formRef = React. createRef & # 40; & # 41 ;;   focusForm = & # 40; & # 41; = > this. formRef? . current. focusInput & # 40; & # 41 ;;   submit = & # 40; & # 41; = > & # 123; if & # 40; this. state. error & # 41; & # 123; alerta & # 40; " Ocorreu um erro; verifique sua entrada. " & # 41 ;; this. focusForm & # 40; & # 41 ;; & # 125; & # 125 ;;   renderizar & # 40; & # 41; & # 123; return & # 40; < div > < Form ref = & # 123; this. formRef & # 125; / > < Button onClick = & # 123; this. submit & # 125; / > < / div > & # 41 ;; & # 125;   & # 125;   a classe Form estende React. Component & # 123;   inputRef = React. createRef & # 40; & # 41 ;;   focusInput & # 40; & # 41; & # 123; this. inputRef. current? . focus & # 40; & # 41 ;; & # 125;   renderizar & # 40; & # 41; & # 123; return < input ref = & # 123; this. inputRef & # 125; / > & # 125; & # 125;

Neste cenário, a propriedade atual de formRef em View não se refere a um nó DOM. Em vez disso, ele faz referência à instância do componente Form que foi renderizada.

Você deve ter cuidado ao usar essa abordagem. Sempre passe dados para componentes filhos por meio de adereços, em vez de usar refs como um sistema de retorno de chamada.

Geralmente, um ref deve ser usado quando a interação direta com o DOM for inevitável. Isso permanece verdadeiro ao atribuir um ref a uma instância do componente React. Você não deve chamar métodos de componentes arbitrários por meio de uma referência.

Nosso exemplo atende a este requisito – Form é um componente de apresentação, enquanto View é um contêiner complexo que pode renderizar vários formulários. Ele precisa ser capaz de definir o foco para campos problemáticos, mesmo que não os esteja renderizando diretamente. A solução é usar um componente ref com cuidado, garantindo que o uso seja justificado pela necessidade de manipular o DOM.

Refs e componentes funcionais

Os componentes funcionais não podem receber refs. Eles não têm instâncias, portanto, não há nada para atribuir a referência. No entanto, você pode usar o encaminhamento para redirecionar um ref para um componente DOM.

O encaminhamento de ref é um recurso opcional que permite que um componente passe um ref que recebe para um dos filhos que renderiza. Para encaminhar uma referência, envolva seu componente com uma chamada para a função forwardRef () do React:

const InputComponent = React. forwardRef & # 40; & # 40; props, ref & # 41; = > & # 40; < input ref = & # 123; ref & # 125; value = & # 123; props. value & # 125; / > & # 41; & # 41 ;;

forwardRef () aceita uma função que deve retornar um componente React. A função será chamada quando precisar renderizar e dois parâmetros serão passados: seus adereços e sua referência encaminhada.

Usando Refs dentro de componentes funcionais

Embora os componentes funcionais não possam receber refs diretamente, eles podem criá-los com o gancho useRef (). Isso é equivalente ao método createRef () disponível em componentes de classe.

const InputComponent = props = > & # 123; const ref = useRef & # 40; & # 41 ;; return < input ref = & # 123; ref & # 125; valor = & # 123; props. value & # 125; / > & # 125 ;;

É importante ressaltar que useRef () pode ser usado para mais do que apenas refs. Sua função real é fornecer uma maneira de persistir os dados entre as chamadas para um componente funcional. Ele retorna um objeto com uma propriedade atual que o React mantém e restaura cada vez que o componente é renderizado.

Você pode, portanto, usar useRef () para persistir dados arbitrários em componentes funcionais. Defina a propriedade atual do objeto retornado com o valor que você deseja manter.

Refs de retorno de chamada

Uma forma final de trabalhar com os refs é por meio do “ callback ” padronizar. Com essa abordagem, você não precisa chamar manualmente createRef () ou useRef (). Em vez disso, você define a prop ref para uma função que o React chamará durante a renderização. Ele passará o nó DOM do elemento como o único argumento para a função.

a classe CallbackRef estende React. Component & # 123; renderizar & # 40; & # 41; & # 123; return < input ref = & # 123; el = > this. inputRef = el & # 125; / > & # 125; & # 125;

Esta é uma maneira mais concisa de criar refs que são atribuídos a propriedades de instância. Sua função recebe o nó DOM diretamente – não há . current para controlar, ao contrário de createRef ().

Conclusão

O React Refs permite que você lide com cenários que você não poderia resolver apenas com a renderização declarativa. Eles são o seu caminho para direcionar a manipulação do DOM ao trabalhar com formulários, reprodução de mídia e animações. Você também se encontrará procurando referências se precisar integrar uma biblioteca JavaScript de terceiros que não foi construída para React.

Embora os refs sejam flexíveis, você não deve abusar deles. Antes de criar uma referência, verifique seus componentes para certificar-se de que você não consegue atingir seu objetivo declarativamente.

Refs são uma parte necessária do React, mas eles contradizem os princípios da biblioteca. Muitos refs podem tornar seu aplicativo complicado de manter rapidamente. Eles permitem que você interrompa o fluxo de dados de cima para baixo que os adereços normalmente aplicam.