React-hooks Refs 使用 一

小成C
110 阅读2分钟

React-hooks系列 useRef 使用一

前言

我们想在页面保留一些信息,又不想页面渲染,我会尝试使用普通的变量 let sample = 'AAAAA'，你可能在function改变sample = 'AAAAA'，但是组件重新渲染后值都是AAAA，组件并没有记住它的信息。

当您希望组件记住一些信息，但又不希望该信息触发页面重新渲染时，您可以使用ref。

目录

一、 怎么使用useRef

二、 Refs和State的区别

三、 Refs的使用场景

四、Refs的注意事项

一、怎么使用Refs

  1. 先引入useRef
import { useRef } from 'react';
  1. 调用useRef
const ref = useRef(0);

3.useRef返回的是一个对象

{ 
  current: 0 
}

4.改变Refs的值

ref.current = ref.current + 1;

二、Refs和state的区别

RefsState
useRef(initialValue) returns { current: initialValue }useState(initialValue) returns 当前state变量值和一个改变state的function ( [value, setValue])
不会触发页面的重新渲染会触发页面的重新渲染
直接赋值是可变的,并且是同步改变你要通过setState去更新当前的值,这样才会更安全。并且它进入一个react的queue队列中,按顺序执行,再重新渲染,所以你在一个function setState改变其值时并不能马上拿到你想要的
在渲染期间你不应该改变refs,因为它不能重新渲染您可以在任何时候读取state。因为，每个渲染都有自己的状态快照，它不会改变

三、refs的使用场景

  1. 清空定时器
const [text, setText] = useState('');
const [isSending, setIsSending] = useState(false);
//使用useRef,让组件记住改setTimeout
let timeoutID = useRef(null);

function handleSend() {
 setIsSending(true);
  //启动计时器
 timeoutID.current = setTimeout(() => {
   alert('Sent!');
   setIsSending(false);
 }, 3000);
}

function handleUndo() {
 setIsSending(false);
 //清空计时器
 clearTimeout(timeoutID.current);
}
  1. 时刻拿到变化的数据
import { useState, useRef } from 'react';

export default function Chat() {
  const [text, setText] = useState('');
  //使用useRef记录text
  const textRef = useRef(text);

  function handleChange(e) {
  //这里需要setText,是因为直接改变textRef.current,并不会使输入框重新渲染
    setText(e.target.value);
    textRef.current = e.target.value;
  }

  function handleSend() {
    setTimeout(() => {
     //延迟三秒弹窗,在三秒内改变内容,可以获取到最新的
      alert('Sending: ' + textRef.current);
    }, 3000);
  }

  return (
    <>
      <input
        value={text}
        onChange={handleChange}
      />
      <button
        onClick={handleSend}>
        Send
      </button>
    </>
  );
}

四、Refs的注意事项

1.把Refs当做是一个逃生窗

把Refs当做是一个逃生窗(意思是,实在没办法了才用Refs).当使用外部系统或浏览器api时，Refs很有用(下一节)。如果您的应用程序逻辑和数据流的大部分依赖于Refs，那么您可能需要重新考虑你的方法。

2.染过程中不要读或写ref.current

在渲染过程中不要读或写ref.current。如果在渲染过程中需要一些信息，请改用state。由于React不知道何时更改Refs，如果在渲染时阅读它也会使组件的行为变得难以预测。

结尾

至此关于react的Refs内容赞告一段落。

下一篇将会介绍refs如何绑定到JSX元素,以及注意事项。

avatar
文章
阅读
粉丝