React Hooks中无需useRef使用ref的相关技术疑问

先看文档中的示例代码：

function MeasureExample() {
  const [height, setHeight] = useState(0);

  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <>
      <h1 ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(height)}px tall</h2>
    </>
  );
}

疑问1：为何无需使用useRef Hook就能获取DOM节点的引用？不是说获取DOM节点实例需要使用useRef吗？ #

React的ref有两种形式：对象式ref（即你熟悉的useRef()创建的）和函数式ref。函数式ref是直接把一个函数传给ref属性，React会在组件挂载时把DOM节点作为参数传给这个函数，卸载时传null。所以不用useRef也能拿到DOM节点，只是两种不同的ref用法而已。

疑问2：示例中作为函数的ref是否应该命名为handleMeasureRef？ #

命名完全是个人或团队的规范问题，没有强制要求。measuredRef直接体现了这个ref的作用是测量节点，handleMeasureRef也没问题，只要命名清晰、符合团队约定就行。

疑问3：文档中提到“我们在这个示例中不选择useRef是因为对象ref不会通知我们当前引用值的变化”，为何对象ref无法通知变化？是否因为它不会触发重渲染？ #

对的，对象式ref是一个可变的容器，它的current属性会在DOM节点挂载后被赋值，但这个赋值过程是静默的——React不会在current变化时通知你，也不会触发组件重渲染。所以如果用对象式ref，你没法自动知道节点什么时候挂载/更新，也就没法及时获取最新的尺寸。

疑问4：是否意味着不使用useRef的ref就能通知引用变化？ #

准确说，函数式ref会在引用变化时（比如DOM节点挂载、卸载、或者ref指向改变时）被React主动调用，相当于给你一个“通知”的时机。而对象式ref没有这个通知机制，你只能自己手动去检查current的值有没有变化，但没法自动触发逻辑。

内容的提问来源于stack exchange，提问作者Sachin