学习React特征（六）- 了解useRef

本文已参与[新人创作礼]活动, 一起开启掘金创作之路。

我报名参加金石计划一期挑战——瓜分10万奖池 这是我的第六篇文章，点击查看活动详情。

什么是 useRef

useRef 使用了 JavaScript 内部的一个特殊属性 current

useRef 常见的结构

import { useRef } from 'react';

function theComponent() {
  const reference = useRef(initialValue);
  const handler = () => {
    // Access reference value:
    const value = reference.current;
    // Update reference value:
    reference.current = newValue;
  };
  // ...
}

current 这个属性有些有趣的特点，可参考以下案例

function App() {
  const countRef = useRef(0);
  
  const handle = () => {
    console.log("Ref :",countRef.current++);
  };

  console.log('rendered!');

  return <button onClick={handle}>Click</button>;
}

执行后在终端看到, Ref: 是从0开始的

而且没有触发 rendered!

useRef 与 useState 进行对比

import * as React from 'react';
import { useRef, useState, Fragment } from 'react'
default function App() {
  const countRef = useRef(0);
  const [count, setCount] = useState(0);
  
  const handleRef = () => {
    console.log("Ref :",countRef.current++);
  };
  const handleState = () => {
    console.log("State :",count + 1);
    setCount(count + 1);
  };
  console.log('rendered!');
  
  return (
  <Fragment>
    <button onClick={handleRef}>Click - Ref</button>
      <br/>
      <br/>
    <button onClick={handleState}>Click - State</button>
  </Fragment>)
}

此时终端的显示是这样的：

这里可以更清楚的看到 useRef 与 useState 在使用中的区别：

相同点

• 都能改变状态

差异点

• useState先update再render， useRef先render再update - 因此显示是 0
• useRef update后，不会触发render

至此，对 useRef 有了初步了解，后续根据学习进度，会做更多分享