聊聊React中的隐藏彩蛋功能

React的代码量可以说是相当庞大。在如此庞大的库中是否存在文档中未提及，但是实际存在的功能呢？

答案是肯定的。

本文将向你介绍3个文档中未提及的隐藏彩蛋功能。

ref cleanup

在当前React中，Ref存在两种数据结构：

1. <T>(instance: T) => void

2. {current: T}

对于大部分需求，我们会使用第二种数据结构。同时，他也是useRef、createRef返回的数据结构。

第一种数据结构主要用于DOM监控，比如在下面的例子中，div的尺寸会反映到height状态中：

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

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

  return (
    <div ref={measuredRef}>Hello 卡颂</div>
  );
}
复制代码

但在上面的例子中，DOM的尺寸变化无法实时反映到height状态。为了反映实时变化，需要使用监控DOM的原生API，比如：

• ResizeObserver，监控DOM尺寸变化