IT博客汇 | 聊聊React中的隐藏彩蛋功能

聊聊React中的隐藏彩蛋功能

卡颂发表于 2023-04-23 10:19:31

大家好，我卡颂。

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

答案是肯定的。

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

欢迎加入人类高质量前端交流群，带飞

ref cleanup

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

<T>(instance: T) => void
{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尺寸变化
IntersectionObserver，监控DOM可视区域变化
MutationObserver，监控DOM树变化

这些API通常是事件驱动，这就涉及到当不需要监控后，解绑事件。

既然事件绑定是在ref回调中进行的，很自然的，解绑事件也应该在ref回调中进行。比如，用ResizeObserver改造上述例子：

function MeasureExample() {
  const [entry, setEntry] = useState();
  
  const measuredRef = useCallback((node) => {
    const observer = new ResizeObserver(([entry]) => {
      setEntry(entry)
    })

    observer.observe(node)
    // 解绑事件
    return () => {
      observer.disconnect()
    }
  }, [])

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

在这个场景中，我们希望函数类型的ref可以返回一个新函数，用于解绑事件（类似useEffect回调的返回值）。

实际上，在19年的#issues 15176中就有人提出这个问题。在去年底的#pull 25686中相关改动已经合并到React main分支。

当前React文档中Ref的部分还未提及这个功能改动。可能在未来的某个小版本中，会上线这个功能。

Module Component

你觉得下面的函数组件能渲染出hello么：

function Child() {
  return {
    render() {
      return "hello";
    }
  };
}

答案是 —— 可以，见Module Component在线示例。

其实这是一种上古时期就存在的组件形式，叫做Module Component（即函数组件返回带有render属性的对象）。

当遇到Module Component，React会将对应函数组件（上例中的Child组件）转换为Class Component，后续更新流程与Class Component无异。

Module Component预计会在未来的某个版本被移除（见#pull 15145），所以文档中并未提及。

要说有啥实际作用，没准可以给你同事带来点小小困惑......

开启全局并发更新

在v18中，只有使用并发特性（比如useTransiton）触发的更新才是并发更新，其他情况触发的更新都是同步更新。

如何才能不使用并发特性，又能全局开启并发更新呢？答案是在项目中加入下面这行咒语：

React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentBatchConfig.transition = {
  帅哥: '卡颂'
};

比如，对于如下例子，渲染一个耗时的列表（每个Item组件render会耗时5ms）：

function App() {
  return (
    <ul className="App">
      {Array.from({ length: 100 }).map((_, i) => (
        <Item key={i} num={i}>
          {i}
        </Item>
      ))}
    </ul>
  );
}

function Item({ children }) {
  const cur = performance.now();
  while (performance.now() - cur < 5) {}
  return <li>{children}</li>;
}

并发示例地址

不加上咒语时的渲染火炬图如下，整个更新流程在一个宏任务中，耗时513ms：

加上咒语时的渲染火炬图如下，整个更新流程被时间切片，每个切片5ms左右：

咒语为什么会起作用呢？

在React、ReactDOM中都存在变量__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED，这个变量的作用是 —— 在不同包之间共享数据。

比如，所有Hook都是从React包中导出的，但Hook的具体实现在ReactDOM包中。为了在他们之间共享Hook，就需要一个媒介，这就是__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED。

类似的，更新相关数据也需要在React与ReactDOM间共享，其中就包括 —— 更新是否是并发更新。

当我们赋值React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentBatchConfig.transition后，React会认为当前更新是并发更新。

通过这种方式，就能全局开启并发更新。

当然，我并不建议你随意更改__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED下的数据，毕竟这个变量的名字还是挺唬人的。

总结

以上便是3个React中的隐藏彩蛋功能。其实除了他们之外，React中还有很多没有暴露出来的API，比如类似Vue中Keep-Alive的Offscreen Component。

当前要想体验Offscreen Component只能通过Suspense间接体验（Suspense能够在pending与挂载组件间切换就是利用Offscreen Component）。

还有什么你知道的React隐藏功能？欢迎在评论区讨论~