В чем преимущества использования useRef или createRef по сравнению со встроенной ссылкой?

Я делал обзор кода и нашел код, написанный другим разработчиком, например:

function sampleComponent() {
       let divRef = {};
    
       return (
        <div ref={(el) => { divRef = el }}></div>
       )
    }

А затем используйте divRef как ссылку на элемент DOM.

Однако известный мне шаблон createRef в компоненте класса и useRefподключить функциональную составляющую. Даже официальный сайт ReactJS https://reactjs.org/docs/refs-and-the-dom.html сказал, что следует избегать встроенных ссылок в будущей версии React. Это устаревший шаблон для написания?

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

Мне было интересно, какое еще есть объяснение этому?

Источник

2 ответа

Решение

Следует иметь в виду две детали

Устаревший API: String Refs Если вы раньше работали с React, возможно, вы знакомы со старым API, в котором атрибут ref является строкой, например "textInput", а доступ к узлу DOM осуществляется как this.refs.textInput. Мы не рекомендуем этого делать, потому что ссылки на строки имеют некоторые проблемы, считаются устаревшими и, вероятно, будут удалены в одном из будущих выпусков.

Это не означает inline Ref, это означает String Ref, inline ref может быть шаблоном обратного вызова. До этого момента это означает только то, что String Ref не рекомендуется использовать, потому что он унаследован и будет удален в ближайшем будущем. Фактически реагируйте на использование в качестве ссылочных функций или более сложных объектов, чтобы обеспечить возможность более широкого использования.

Предостережения с обратным вызовом refs Если обратный вызов ref определен как встроенная функция, он будет вызываться дважды во время обновлений, сначала с нулем, а затем снова с элементом DOM. Это связано с тем, что при каждом рендеринге создается новый экземпляр функции, поэтому React необходимо очистить старую ссылку и настроить новую. Вы можете избежать этого, определив обратный вызов ref как связанный метод в классе, но обратите внимание, что в большинстве случаев это не имеет значения.

Здесь точка против шаблона обратного вызова. Реагентам необходимо дважды вызвать функцию, потому что сначала нужно очистить ссылку, а затем присвоить новое значение.

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

Источник

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

В любом случае я думаю, что если не требуется детализации, createRef или useRef являются скорее "лучшими практиками".

Что касается меня, я стараюсь использовать createRef и useRef, поскольку они используют myRef.current (в отличие от просто myRef), чтобы не запутаться.

Источник
Другие вопросы по тегам