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 (
    "App">
      Num: {minus}
      Add
    

二、使用

2.1 基本语法

见链接：https://reactjs.org/docs/hooks-reference.html#useref

• 每次渲染useRef返回值都不变；

• ref.current发生变化并不会造成re-render;

• 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 (
    
{`The component has been re-rendered ${counter.current} times`}

  );
}

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.4ref.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 (
    "App">
      Num: {minus}
      Add