useRef 简单易懂解析（三）ref 和 state 的对比

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

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

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

系列文章

refs 和 state 的对比

也许你会认为 refs 似乎没有 state 那么“严格” —— 例如，你可以改变它们，而不是总是需要使用状态设置函数。但在大多数情况下，你会希望使用 state。Refs 是你不经常需要的“逃生舱”。以下是 state 和 refs 的比较:

refs	state
`useRef(initialValue)` 返回 `{ current: initialValue }`	`useState(initialValue)` 返回 state 的当前值和一个状态设置函数 ( `[value, setValue]`)
当你改变它的时候不会触发 re-render	当你改变它的时候会触发 re-render
可变的—你可以在 rendering 过程之外修改和更新 `current` 的值	“不可变的”—你必须使用状态设置函数去修改状态，排队重新 re-render
你不应该在 rendering 过程中读或写 `current` 的值	你可以在任何时间读取 state，然而，每次 render 有它自己不会变化的 state 快照

这是一个使用状态实现的计数器按钮：

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You clicked {count} times
    </button>
  );
}

因为显示了 count 的值，所以使用 state 是有意义的。当使用 setCount() 设置计数器的值时，React 会 re-render 组件并更新屏幕以展示新的 count。

如果你试图用 ref 来实现它，React 永远不会重新渲染组件，所以你永远不会看到计数变化！

import { useRef } from 'react';

export default function Counter() {
  let countRef = useRef(0);

  function handleClick() {
    // 这里不会 re-render 这个组件!
    countRef.current = countRef.current + 1;
  }

  return (
    <button onClick={handleClick}>
      You clicked {countRef.current} times
    </button>
  );
}