[React] useRef用法和特性

简介: [React] useRef用法和特性

useRef 与 useState 的区别

一般在使用react-hook的时候,我们用到最多的就是定义变量,以及对应的修改变量

下面是一个最基本的 react-hook 应用程序

const Home = () => {
  const [username, setUserName] = useState('');
  return (
    <input 
      value={username}
      onChange={(e) => setUserName(e.target.value)}
    />
}

以上并不是以使用useState的方式来进行对useRef的衬托,两者功能是不同的,只是便于区分


但是如果我想让浏览器渲染的时候,让他的次数自增,这样就会有一些意想不到的隐患…

如下代码所示,当我使用 useEffect 钩子进行input值渲染的时候,他的状态会发生改变,然后又会重新渲染,状态又重新改变,于是就这样无限循环下去…

const Home = () => {
  const [username, setUserName] = useState('');
  useEffect(() => { // useEffect 页面渲染时所调用的钩子
    setUserName(username => username + 1);
  }, [username])
  return (
    <input 
      value={username} // 循环...循环...循环
    />
}

ReactuseEffect钩子改变状态再次循环yes


useRef 的 用法以及特性


介绍: useRef 是一个 React Hook,它能让你引用一个不需要渲染的值。

使用 useRef 可以返回一个只有一个属性的对象: current,从一开始,他会是你传递的 initial Value, 之后,如果你需要,可以修改它(ref.current), 如果或他是一个需要你渲染的对象,那么你将不应该去修改它。

这可能会让你想起 useState,但是useRef是可变的, useRef值不会触发react渲染机制, 因为它本身就是一个再普通不过的javascript对象。这意味着 ref 是存储一些不影响组件视图输出的信息的完美选择!


官方文档注意:

除了 初始化 外不要在渲染期间写入 或者读取 ref.current。这会使你的组件的行为不可预测。

在严格模式下,React 将会 调用两次组件方法,这是为了 帮助你发现意外的问题。这只是开发模式下的行为,不影响生产模式。每个 ref 对象将会创建两次,但是其中一个版本将被丢弃。如果你的组件函数是纯的(应该如此),这不会影响其行为。


useRef(initialValue)

在你组件的顶层调用 useRef 声明一个 ref。

import React, { useRef } from 'react'
const useRefTest = () => {
   const pNum = useRef(0)
   ...
}

useRef 会返回单个 current

current: 0

通过使用 ref,你可以确保:

  • 你可以在重新渲染之间 存储信息(不像是普通对象,每次渲染都会重置)。
  • 改变它 不会触发重新渲染(不像是 state 变量,会触发重新渲染)。
  • 对于你的组件的每个副本来说,这些信息都是本地的(不像是外面的变量,是共享的)。

通过 ref 操作 DOM

使用 ref 操作 DOM 是非常常见的。React 内置了对它的支持。

首先,声明一个 initial value 为 null 的 ref 对象

import React, { useRef } from 'react'
const test = () => {
  const defaultDom = useRef(null)
}

然后将你的 ref 对象作为 ref 属性传递给你想要操作的 DOM 节点的 JSX

import React, { useRef } from 'react'
const test = () => {
  const defaultDom = useRef(null)
  return (
  <>
   <input ref={defaultDom} />
   <button onClick={handleClick}>foucs the input!</button>
  </>
  )
}

当 React 创建 DOM 节点并将其渲染到屏幕时,React 将会把 DOM 节点设置为你的 ref 对象的 current 属性。现在你可以访问 的 DOM 节点,并且可以调用类似于 focus() 的方法 (获取input输入框的焦点):

const handleClick = () => {
    defaultDom.current.focus()
  }

更多请参考官方文档!

相关文章
|
6月前
|
前端开发 API UED
React 18有哪些新特性值得关注
【4月更文挑战第18天】React 18推出了新渲染引擎React Reconciler,提升性能和可扩展性;优化SSR,加快首屏加载;新事件处理API增强控制与可读性;自动批量处理减少渲染次数;引入过渡和并发模式,精细控制更新优先级;改变根节点挂载方式,提升响应速度。不支持IE,新增API和服务端渲染优化。React 18在性能、体验和开发效率上迈出重要一步。
467 2
|
2月前
|
前端开发 JavaScript
React中函数式Hooks之useRef的使用
React中函数式Hooks的useRef用于获取DOM元素的引用,示例代码演示了其基本用法。
33 3
|
3月前
|
前端开发
React使用useRef ts 报错
【8月更文挑战第17天】
62 4
|
5天前
|
存储 缓存 JavaScript
深入理解 React-Hooks 之 useRef
【10月更文挑战第20天】总之,`useRef` 是 React-Hooks 中一个非常实用的工具,它为我们提供了一种灵活而强大的方式来处理组件中的各种数据和操作。通过深入理解和掌握 `useRef` 的原理和用法,我们能够更好地构建高效、稳定的 React 应用。
15 6
|
13天前
|
前端开发 开发者
React 18 的新特性
【10月更文挑战第12天】 React 18 引入了并发渲染、自动批处理、新的 Suspense 特性、新的 Hooks 和其他多项改进。并发渲染使渲染过程可中断和恢复,提高了应用响应性;自动批处理优化了事件处理,减少不必要的重新渲染;新的 Suspense 支持数据获取和更好的错误处理;新增的 `useId` 和 `useTransition` Hooks 提供了更多功能;服务器组件和改进的错误边界处理进一步提升了性能和稳定性。这些新特性为开发者提供了强大的工具,帮助构建更高效、更稳定的应用。
|
2月前
|
存储 移动开发 前端开发
探秘react,一文弄懂react的基本使用和高级特性
该文章全面介绍了React的基本使用方法与高级特性,包括JSX语法、组件化设计、状态管理、生命周期方法、Hooks使用、性能优化策略等内容,并探讨了Redux和React Router在项目中的集成与应用。
探秘react,一文弄懂react的基本使用和高级特性
|
14天前
|
存储 前端开发 JavaScript
React useState 和 useRef 的区别
本文介绍了 React 中 `useState` 和 `useRef` 这两个重要 Hook 的区别和使用场景。`useState` 用于管理状态并在状态变化时重新渲染组件,适用于表单输入、显示/隐藏组件、动态样式等场景。`useRef` 则用于在渲染之间保持可变值而不触发重新渲染,适用于访问 DOM 元素、存储定时器 ID 等场景。文章还提供了具体的代码示例,帮助读者更好地理解和应用这两个 Hook。
26 0
|
2月前
|
存储 前端开发 JavaScript
react的useRef用什么作用
react的useRef用什么作用
30 1
|
3月前
|
缓存 JavaScript 前端开发
react.js高级用法
【8月更文挑战第27天】react.js高级用法
35 2
|
3月前
|
Web App开发 监控 前端开发
React 性能监测工具大揭秘!Chrome DevTools 高级用法来袭,让你的 React 应用性能飙升!
【8月更文挑战第31天】在前端开发中,React 框架虽简化了高效、交互性强的用户界面构建,但应用复杂性增加亦可能引发性能问题。此时,Chrome DevTools 凭其性能面板成为了优化应用性能的重要工具,能帮助开发者记录与分析加载时间、渲染及脚本执行等性能指标,定位并解决性能瓶颈。同时,其 React 开发者扩展工具允许实时监控组件状态变化,进一步提升性能。结合运用这些功能,将有助于打造流畅的用户体验。
84 0