React 之 使用 ref 引用值(七)

当你希望组件"记住"某些信息,但又不想让这些信息 触发新的渲染 时,你可以使用 ref 。

javascript 复制代码
//通过从 React 导入 useRef Hook 来为你的组件添加一个 ref
import { useRef } from 'react';

export default function Counter() {
  //在组件内,调用 useRef Hook 并传入初始值作为唯一参数。
  //这里的 ref 指向一个数字,但是,像 state 一样,你可以让它指向任何东西:字符串、对象,甚至是函数。
  //与 state 一样,React 会在每次重新渲染之间保留 ref。但是,设置 state 会重新渲染组件,更改 ref 不会!
  let ref = useRef(0);
  //useRef 返回一个这样的对象:
  //{ 
  //current: 0 // 你向 useRef 传入的值
  //}
  function handleClick() {
    ref.current = ref.current + 1;
    alert('你点击了 ' + ref.current + ' 次!');
  }

  return (
    <button onClick={handleClick}>
      点击我!
    </button>
  );
}

ref 和 state 的不同之处

ref state
useRef(initialValue)返回 { current: initialValue } useState(initialValue) 返回 state 变量的当前值和一个 state 设置函数 ( [value, setValue])
更改时不会触发重新渲染 更改时触发重新渲染。
-- --
可变 ------ 你可以在渲染过程之外修改和更新 current 的值。 "不可变" ------ 你必须使用 state 设置函数来修改 state 变量,从而排队重新渲染。
你不应在渲染期间读取(或写入) current 值。 你可以随时读取 state。但是,每次渲染都有自己不变的 state 快照。

何时使用 ref

通常,当你的组件需要"跳出" React 并与外部 API 通信时,你会用到 ref ------ 通常是不会影响组件外观的浏览器

API。以下是这些罕见情况中的几个:

  • 存储 timeout ID
  • 存储和操作 DOM 元素,我们将在 下一页 中介绍
  • 存储不需要被用来计算 JSX 的其他对象。

如果你的组件需要存储一些值,但不影响渲染逻辑,请选择 ref。

ref 和 DOM

你可以将 ref 指向任何值。但是,ref 最常见的用法是访问 DOM 元素。列如下面的例子:

javascript 复制代码
import { useRef } from 'react';

export default function Form() {
  //使用 useRef Hook 声明 inputRef
  const inputRef = useRef(null);

  function handleClick() {
  	//从 inputRef.current 读取 input DOM 节点并使用 inputRef.current.focus() 调用它的 focus()。
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />  //这告诉 React 将这个 <input> 的 DOM 节点放inputRef.current。
      <button onClick={handleClick}>  //用 onClick 将 handleClick 事件处理器传递给 <button>
        聚焦输入框
      </button>
    </>
  );
}

ref 的最佳实践

  1. 当你使用外部系统或浏览器 API 时,ref 很有用。如果你很大一部分应用程序逻辑和数据流都依赖于 ref,你可能需要重新考虑你的方法。
  2. 不要在渲染过程中读取或写入 ref.current。 如果渲染过程中需要某些信息,请使用 state 代替。由于 React 不知道 ref.current 何时发生变化,即使在渲染时读取它也会使组件的行为难以预测。(唯一的例外是像 if (!ref.current) ref.current = new Thing() 这样的代码,它只在第一次渲染期间设置一次 ref。)

总结

  1. ref 是一种脱围机制,用于保留不用于渲染的值。 你不会经常需要它们。
  2. ref 是一个普通的 JavaScript 对象,具有一个名为 current 的属性,你可以对其进行读取或设置。
  3. 你可以通过调用 useRef Hook 来让 React 给你一个 ref。
  4. 与 state 一样,ref 允许你在组件的重新渲染之间保留信息。
  5. 与 state 不同,设置 ref 的 current 值不会触发重新渲染。
  6. 不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测。
相关推荐
姑苏洛言4 分钟前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家6 分钟前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya9 分钟前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me15 分钟前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__42 分钟前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭1 小时前
需求:对表格操作列中的操作进行局部刷新
前端
番茄比较犟1 小时前
Combine知识点switchToLatest
前端
北京_宏哥1 小时前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
随笔记1 小时前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack
Process1 小时前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化