useRef使用细节

使用useRef有段时间了，最近梳理了useRef的使用细节。

1、动机

1. 函数组件访问DOM元素；
2. 函数组件访问以前渲染变量。

函数组件每次渲染都会被执行，函数内部的局部变量通常会从新建立，利用useRef能够访问上次渲染的变量，相似类组件的实例变量效果。

1.2 函数组件使用createRef不行吗？

createRef主要解决class组件访问DOM元素问题，而且最佳实践是在组件周期内只建立一次（通常在构造函数里调用）。若是在函数组件内使用createRef会形成每次render都会调用createRef：

function WithCreateRef() {
  const [minus, setMinus] = useState(0);
  // 每次render都会从新建立`ref`
  const ref = React.createRef(null);

  const handleClick = () => {
    setMinus(minus + 1);
  };

  // 这里每次都是`null`
  console.log(`ref.current=${ref.current}`)

  useEffect(() => {
    console.log(`denp[minus]>`, ref.current && ref.current.innerText);
  }, [minus]);

  return (
    <div className="App">
      <h1 ref={ref}>Num: {minus}</h1>
      <button onClick={handleClick}>Add</button>
    </div>
  );
}

2、使用

2.1 基本语法

见文档

1. 每次渲染useRef返回值都不变；
2. ref.current发生变化并不会形成re-render;
3. ref.current发生变化应该做为Side Effect（由于它会影响下次渲染），因此不该该在render阶段更新current属性。

2.2 不能够在render里更新ref.current值

在Is there something like instance variables提到:

Unless you’re doing lazy initialization, avoid setting refs during rendering — this can lead to surprising behavior. Instead, typically you want to modify refs in event handlers and effects.

在render里更新refs致使什么问题呢？
在异步渲染里render阶段可能会屡次执行。

const RenderCounter = () => {
  const counter = useRef(0);
  
  // counter.current的值可能增长不止一次
  counter.current = counter.current + 1;
  
  return (
    <h1>{`The component has been re-rendered ${counter.current} times`}</h1>
  );
}

2.3 能够在render里更新ref.current值

一样也是在Is there something like instance variables提到的:

Unless you’re doing lazy initialization, avoid setting refs during rendering — this can lead to surprising behavior. Instead, typically you want to modify refs in event handlers and effects.

为啥lazy initialization却能够在render里更新ref.current值？
这个跟useRef懒初始化的实现方案有关。

const instance = React.useRef(null)
if (instance.current == null) {
  instance.current = {
    // whatever you need
  }
}

本质上只要保证每次render不会形成意外效果，均可以在render阶段更新ref.current。但最好别这样，容易形成问题，useRef懒初始化毕竟是个特殊的例外。

2.4 ref.current 不能够做为其余hooks（useMemo, useCallback, useEffect）依赖项

ref.current的值发生变动并不会形成re-render, Reactjs并不会跟踪ref.current的变化。

function Minus() {
  const [minus, setMinus] = useState(0);
  const ref = useRef(null);

  const handleClick = () => {
    setMinus(minus + 1);
  };

  console.log(`ref.current=${ref.current && ref.current.innerText}`)

  // #1 uesEffect
  useEffect(() => {
    console.log(`denp[ref.current] >`, ref.current && ref.current.innerText);
  }, [ref.current]);

  // #2 uesEffect
  useEffect(() => {
    console.log(`denp[minus]>`, ref.current && ref.current.innerText);
  }, [minus]);

  return (
    <div className="App">
      <h1 ref={ref}>Num: {minus}</h1>
      <button onClick={handleClick}>Add</button>
    </div>
  );
}

本例子中当点击[Add]按钮两次后#1 uesEffect就不会再执行了，如图：

缘由分析：
依赖项判断是在render阶段判断的，发生在在ref.current更新以前，而useEffect的effect函数执行在渲染以后。

1. 第一次执行：
   首次无脑执行，因此输出：

   ref.current=null
   denp[ref.current] > Num: 0
   denp[minus]> Num: 0

   而且此时ref.current为null，因此 #1 uesEffect至关于useEffect(() => console.log('num 1'), [null])

2. 点击[Add]，第二次执行：
   此时ref.current值为<h1>Num: 0<h1>，因此 #1 uesEffect的依赖项发生变化，最终输出：

   ref.current=Num: 0
   denp[ref.current] > Num: 1
   denp[minus]> Num: 1

   此时 #1 uesEffect至关于useEffect(() => console.log('num 1'), [<h1>Num: 0<h1>])

3. 点击[Add]，第三次执行：
   此时ref.current值为<h1>Num: 1<h1>，因此 #1 uesEffect的依赖项没有发生变化，故 #1 uesEffect的effect函数不会被执行，最终输出：

   ref.current=Num: 1
   denp[minus]> Num: 2

若是将ref.current做为依赖项，eslint-plugin-react-hooks也会报警提示的：

React Hook useEffect has an unnecessary dependency: 'ref.current'. Either exclude it or remove the dependency array. Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps

2.5 ref做为其余hooks（useMemo, useCallback, useEffect）依赖项

ref是不变的，不必做为其余hooks依赖。

3、原理

本质上是记忆hook，但也可做为data hook，能够简单的用useState模拟useRef：

const useRef = (initialValue) => {
  const [ref] = useState({ current: initialValue});
  return ref
}

参考

整理自gitHub笔记：useRef