useRef 简单易懂解析(一)useRef 的使用

·  阅读 2000

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

翻译自:beta.reactjs.org/learn/refer…

当你希望组件“记住”一些信息,但是你不希望这些信息触发重新 render 的时候,你可以使用 ref,它像一个秘密的“口袋”,用于在组件中存储信息。

系列文章

为你的组件添加 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 则不会。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改