小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
翻译自:beta.reactjs.org/learn/refer…
当你希望组件“记住”一些信息,但是你不希望这些信息触发重新 render 的时候,你可以使用 ref,它像一个秘密的“口袋”,用于在组件中存储信息。
系列文章
- useRef 简单易懂解析(一)useRef 的使用
- useRef 简单易懂解析(二)useRef 的例子
- useRef 简单易懂解析(三)ref 和 state 的对比
- useRef 简单易懂解析(四)useRef 的原理
- useRef 简单易懂解析(五)ref 的最佳实践
- useRef 简单易懂解析(六)ref 的总结
- useRef 简单易懂解析(七)你学会了吗,来试试这些挑战 - 修复坏掉的聊天输入框
- useRef 简单易懂解析(八)你学会了吗,来试试这些挑战 - 修复无法重新渲染的组件
- useRef 简单易懂解析(九)你学会了吗,来试试这些挑战 - 修复去抖动
- useRef 简单易懂解析(十)你学会了吗,来试试这些挑战 - 读取最新状态
为你的组件添加 ref
你可以通过从 React 中 import useRef 勾子来给你的组件添加一个 ref:
import { useRef } from 'react';
在组件内部,调用 useRef
勾子,并传递初始值,作为唯一的参数。例如,这里的 ref 值是 0.
const ref = useRef(0);
useRef
返回这样一个对象
{
current: 0 // 传递给 useRef 的值
}
你可以通过 ref.current
属性访问这个 ref 的当前值。这个值是有意设置为可变的。这意味着您可以对它进行读写操作。(这是为什么它是React单向数据流的“逃生舱门”的原因——详见下文)
在这里,按钮将在每次点击后增加 ref.current:
import { useRef } from 'react';
export default function Counter() {
let ref = useRef(0);
function handleClick() {
ref.current = ref.current + 1;
alert('You clicked ' + ref.current + ' times!');
}
return (
<button onClick={handleClick}>
Click me!
</button>
);
}
上面的例子中,ref 指向一个数字,但是,像 state 一样,ref 可以指向任何东西:比如字符串、对象甚至函数。与 state 不同的是,ref 是一个带有当前属性的普通 JavaScript 对象,可以读取和修改。
注意,组件不会在每次递增时都 re-render。像 state 一样,refs 在 re-render 之间被 React 保留。然而,设置状态将 re-render 组件,设置 ref 则不会。