Предисловие: в этой статье предполагается, что у вас есть базовые знания об хуках реакции.В основном в ней обсуждается, что такое useRef, разница между useRef и createRef и когда использовать useRef.
что такое пользаСсылка
Во-первых, нам нужно реализовать требование — ввод устанавливает фокус при нажатии кнопки.
createRef API
Точно так же мы можем использовать useRef для достижения точно такого же результата.
useRef Hook
В приведенном выше примере функции createRef и useRef абсолютно одинаковы, так почему же React должен разрабатывать новый хук, если он просто добавляет использование для унификации спецификации хука?
Разница между createRef и useRef
На самом деле, если вы внимательно прочитаете официальную документацию, вы обнаружите, что они действительно разные.
Определение официального сайта выглядит следующим образом: useRef возвращает изменяемый объект ref, свойство .current которого инициализируется переданным аргументом (initialValue).Возвращенный объект будет сохраняться в течение всего срока службы компонента.
Другими словами, роль useRef в хуке реакции, как сказано на официальном сайте, это как переменная, как ящик, в котором можно хранить что угодно. createRef возвращает новую ссылку каждый раз при рендеринге, а useRef каждый раз возвращает одну и ту же ссылку.
Если вы этого не понимаете, ничего страшного.Давайте используем другой пример, чтобы понять разницу между createRef и useRef.
Посмотрите внимательно на приведенный выше код, что он выводит? Даже если компонент перерисовывается, так как значение refFromUseRef всегда существует (аналогично этому), его нельзя переназначить, результат такой:
Когда использовать useRef
Зачем разрабатывать API useRef? Давайте рассмотрим реальный сценарий приложения. Рассмотрим классический пример.
Угадайте, какое предупреждение появится? Это состояние счетчика в реальном времени на интерфейсе или моментальный снимок счетчика при нажатии кнопки?
Почему на интерфейсе не показывается статус счетчика в реальном времени?
Фактический принцип реализации намного сложнее, здесь его можно просто понимать как выполнение обычной функции.
Когда мы обновим состояние, React повторно отобразит компонент, каждый рендеринг получит отдельное состояние счетчика и повторно отобразит функцию handleAlertClick.Каждый handleAlertClick имеет внутри свой счетчик.
В этом случае, как мы понимаем в приведенном выше примере, значением предупреждения является значение счетчика в момент клика.
Как сделать так, чтобы счетчик в реальном времени всплывал при нажатии?
Поскольку useRef каждый раз возвращает одну и ту же ссылку, когда она изменяется в useEffect, она также будет изменена в оповещении в то же время Таким образом, счетчик в реальном времени может всплывать при нажатии.
Вышеупомянутая проблема решена, продолжаем, хотим вывести на интерфейс значение предыдущего счетчика Код выше.
Получите предыдущее значение, которого в реальных сценариях немного, мы пытаемся инкапсулировать его как пользовательский хук.
Ну, таким образом, мы можем легко получить последнее значение в функциональном компоненте Таким образом, мы можем просто реализовать componentDidUpdate в компоненте класса, чтобы получить значение prevProps.
Суммировать
useRef предназначен не только для управления ссылками DOM, он может содержать любую переменную.
useRef может очень хорошо решить неудобства, вызванные замыканиями. Вы можете увидеть это в различных библиотеках, таких как useInterval , usePrevious в react-use …
Стоит отметить, что useRef не уведомляет вас об изменении содержимого useRef. Изменение свойства .current не приведет к повторному рендерингу. Потому что он всегда был эталоном.
-
Добро пожаловать в «Front-end Jiajia» и регулярно делитесь высококачественными статьями.
-
Ответьте, чтобы добавить группу, пригласите вас присоединиться к технической группе, долгосрочному техническому обмену и обучению