USEREF крюк как мультипликационный объект.

Автор оригинала: DhananjayKumar.

Официально реагировать Документация Определите УСЭРЕФ как:

Крюк USEREF – это функция, которая возвращает объект Metable Ref Ref, свойство которого и инициализируется на прошедший аргумент (INANIVINGVALUE). Возвращенный объект будет сохраняться в течение полной жизни компонента.

const refContainer = useRef(initialValue);

Общий случай использования – добраться до доступа к ребенку:

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      
      Focus the input
    
  );
}

По сути, UseRef похож на «коробку», которая может провести сменное значение в свой собственность. Вы можете быть знакомы с Refs в первую очередь как способ получить доступ к дому. Если вы проходите объект Ref для реагирования с помощью

Тем не менее, USEREF () полезен для большего количества атрибута REF. Это удобно для того, чтобы держать любую подметающую ценность вокруг, похоже на то, как вы используете поля экземпляра в классах. Давайте понять это с примером.

Если вы знакомы с компонентами RACT Class, вы, возможно, заметили, что функциональный компонент представляет собой компонент реагирования без функции Render. Все, что определено в теле функции, – это функция рендеринга, которая возвращает JSX в конце.

Это означает, что всякий раз, когда существует изменение в состоянии, то выполнены все коды в функциональном компонентах. Это подразумевает, если у нас есть переменная экземпляра внутри функционального компонента, то с каждым визуализом это будет инициализировано значением по умолчанию. Докажем, у нас есть переменная экземпляра, которая записывает количество stateChange после установки компонента. Сначала мы напишем что-то, как показано ниже –

import React, {useState} from 'react';
const child = {
  padding: '25px',
  margin: '25px',
  border: '2px solid blue'
};

const Child = (prop) => {
  console.log("fuction called....");
  let counter = 0;
  let [myState, setMyState] = useState("A");
  
  let updateState = () => {
    counter++;
    setMyState(myState + "-u-");
    console.log("counter: "+ counter);
  }

  return (
    

      

        
MyState : {myState}
         updateState()} value="Update State">
      
    
  );
}

export default Child;

Но здесь мы видим проблему, которую каждая стоимость счетчика stateChage составляет 1, и причина проста с каждой переменной рендеринга повторно назначена.

Требование вот это должно быть увеличено с каждым изменением состояния. Теперь давайте модифицируем эту переменную экземпляра для создания использования USEREF. И теперь тот же воссозданный объект будет использоваться всегда и останется закрытыми к компоненту для полной жизни компонента.

import React, {useState, useRef} from 'react';
const child = {
  padding: '25px',
  margin: '25px',
  border: '2px solid blue'
};

const Child = (prop) => {
  console.log("fuction called....");
  let counter = useRef(0);
  let [myState, setMyState] = useState("A");
  
  let updateState = () => {
    // Now we can update the current property of Referenced object as below.
    counter.current++;
    setMyState(myState + "-u-");
    console.log("counter: "+ counter.current);
  }

  return (
    

      

        
MyState : {myState}
         updateState()} value="Update State">
      
    
  );
}

export default Child;

Теперь, наконец, мы получаем ожидаемый результат.

Последнее, имейте в виду, что USEREF не уведомит вас, когда его содержание меняется. Мутирование имущества. Союза не вызывает реранда. Если вы хотите запустить какой-то код при накреплении или отсоединения ref в узел DOM, вы можете использовать обратный вызов.

Когда использовать ref-ref-атрибут?

Но это не всегда хорошая идея использовать атрибут REF. Общее правило, чтобы избежать его. Официальная документация по реагированию упоминает три случая, где вы можете использовать его, потому что у вас нет другого выбора.

• Управление фокусировкой, выбором текста или воспроизведение медиа.
• Интеграция со сторонними библиотеками DOM.
• Запуск императивных анимаций.

Во-первых, вы можете использовать атрибут REF для доступа к API DOM (что такое API?). Вы можете получить значение входного элемента, но вы также можете запускать методы, такие как фокус (). Он дает вам контроль над API DOM, например, для использования мультимедиа элементов.

Во-вторых, вы можете использовать его для интеграции со сторонними библиотеками, которые полагаются на DOM. D3.JS – это такое использование, потому что он должен крюкнуть в DOM, и у него есть собственные API манипуляций DOM. Например, вы можете интегрировать компонент D3 в иерархии компонентов реагирования. Поэтому вы можете использовать атрибут REF в качестве точки входа для компонента D3. Вы оставляете React World и получить доступ к миру D3.

Последнее, но не в последнюю очередь, вы можете неиспользоваться анимацией на ваших элементах.

Это единственные случаи, когда вам следует использовать атрибут REF в вашем React Dom.