为何将状态设置器作为ref回调未触发重渲染及无限循环？

先看你的代码示例：

import "./styles.css";
import React from "react";
export default function App() {
  const [element, setElement] = React.useState(null);
  const [count, setCounter] = React.useState(0);
  console.log(element);
  const handleClick = (e) => {
    setCounter(count + 1);
  };
  return (
    <div className="App">
      <h1
        ref={setElement}
      >
        Hello CodeSandbox
      </h1>
    </div>
  );
}

核心逻辑是直接将状态设置器作为ref回调：ref={setElement}

原因拆解： #

• React状态更新的浅比较机制：React处理setState类的更新时，会先对新值和旧值做浅比较。第一次渲染时，setElement传入h1的DOM元素，element从null变为真实DOM引用，状态变化触发重渲染。但重渲染时，ref回调再次传入的是同一个DOM元素引用，React发现新值和当前element的旧值完全相等，就不会执行状态更新，自然不会触发下一次重渲染。
• ref回调的执行逻辑：React只会在三种情况触发ref回调：组件挂载时传入DOM元素、组件卸载时传入null、或者ref回调本身发生变化（比如每次渲染都创建新的回调函数）。这里的setElement是useState返回的稳定函数，不会随渲染变化，同时对应的h1元素也没有被替换，所以重渲染时虽然会执行ref回调，但传入的引用没变，不会引发状态更新循环。

内容的提问来源于stack exchange，提问作者T.I