reactjs - 在 DOM 主机中自定义 React 渲染器的目的是什么？

Question

序幕
我们都熟悉 React 自带的默认渲染器——ReactDOM。
我们还有自定义 React 渲染器，可用于与 "hosts" 交互那个不是 DOM 环境，例如移动设备(著名的 React Native)、VR 设备、终端(如 ink)等。
然而，有一些自定义渲染器在浏览器主机中运行(或代替) ReactDOM。

核心问题
在浏览器主机中运行的自定义渲染器的目的是什么？

例子
在浏览器主机中运行的自定义渲染器的一些值得注意的例子是:

https://github.com/michalochman/react-pixi-fiber

https://github.com/react-spring/react-three-fiber

以下片段来自 react-three-fiber Threejs 元素在 React 中声明，并且在后台它会“映射”到特定的 Canvas 操作:

<Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
</Canvas>

react-three-fiber正在使用自定义渲染器来实现上述目的，但我认为它也可以通过副作用来实现。盒子可以有一个 useEffect对 Threejs 实例执行操作。
可能性/假设
那么为什么要选择自定义渲染器呢？
我相信它可能是以下零个、一个或多个:

通过绕过生命周期/副作用有一些性能提升吗？

更严格地控​​制排序和安装/卸载？

代码简单，在设置自定义渲染器的初始障碍之后，其余的映射变得更容易？

Answer 1

在 React 中使用自定义协调器有一些有趣的优势。正如你在 react-pixi-fiber 的 README.md 文件中看到的，完全可以使用 ReactDOM 来渲染 pixi 元素，而不是使用 react-pixi-fiber 的自定义渲染。
为什么要创建自定义渲染器/协调器呢？
在这种特定情况下，原因是 ReactDOM 并没有真正处理 Canvas 元素。不过，正如您所说，这可以通过自定义 Hook /组件的组合来实现。如果您阅读了 why在 react-three-fiber 部分，您将看到，与自定义组件相比，通过使用他们的自定义协调器，您可以实现两件事:

Threejs 中的所有内容都可以在这里工作，因为协调器内置了支持。

性能与直接使用threejs时相同，因为协调器对渲染的内容和时间有更多的控制。

你可以看看 here其中对渲染和协调之间的区别以及协调器如何细粒度访问以下内容进行了深入解释:组件生命周期，决定差异以及如何从 View 中添加/删除元素(在 DOM、 Canvas 、iOS 等中)。