O uso de Refs no React, e quando o usar.

No React, nós podemos usar o React props para fazer uma conexão entre componentes pais e filhos, podendo os chamar em filhos, reutilizando o raciocínio criado em Pai. Esse tipo de relação pode ser usado em outras partes do código, utilizando como um ponto de chamada, mesmo que fora do fluxo padrão React. A linguagem criada pelo Facebook, criou os Refs, e veremos agora o que são.

Refs em React são uma maneira de acessar e manipular elementos do DOM ou componentes React diretamente.

Os refs podem ser criados de duas maneiras:

• Refs criadas usando a API React.createRef()
• Refs criadas usando callbacks de ref.

Refs criadas usando a API React.createRef() -

As refs criadas usando React.createRef() são criadas como propriedades de classe e podem ser acessadas diretamente no código do componente. Para criar uma ref, chame React.createRef() em uma variável e, em seguida, atribua essa variável a uma propriedade da classe:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

Vale lembra certas características em sua consulta:

o ref criado no construtor com React.createRef()recebe o elemento DOM como sua current propriedade[caso acima].

Você não pode usar o ref em componentes de função porque eles não têm instâncias.

Mas e se nós quisermos usar o Ref realmente? Veja um exemplo parecido com o que está acima:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

No método componentDidMount(), chamamos this.myRef.current.focus() para focar no campo de entrada de texto. Após isso, o chamamos no render(){}.

Refs criadas usando callbacks de ref -

As refs criadas usando callbacks de ref são definidas como funções em vez de propriedades de classe. Quando o componente é renderizado, o React chama a função de ref com o elemento DOM ou o componente React que a ref é anexada como seu argumento. Vejams um exemplo de um código igual ao anterior, mas criado como uma callback:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
    this.setMyRef = element => {
      this.myRef = element;
    };
  }

  componentDidMount() {
    this.myRef.focus();
  }

  render() {
    return <input type="text" ref={this.setMyRef} />;
  }
}

Neste exemplo, criamos uma ref definindo uma variável myRef como nula e, em seguida, criamos uma função setMyRef que define myRef como seu argumento. No método componentDidMount(), chamamos this.myRef.focus() para focar no campo de entrada de texto. Na renderização do componente, passamos a função de ref setMyRef como o valor da propriedade ref no elemento de entrada.

Concluímos que as refs são uma maneira de acessar e manipular elementos do DOM ou componentes React diretamente. Eles são úteis quando você precisa gerenciar um componente filho de forma imperativa ou quando precisa acessar um elemento específico da página. Há duas maneiras de criar refs em React: usando a API React.createRef() e usando callbacks de ref. Ambos são poderosos e flexíveis, então escolha o que melhor se adapta às suas necessidades.