7

序幕

我们都熟悉 React 自带的默认渲染器——ReactDOM。

我们还有自定义的 React 渲染器，可用于与非DOM 环境的“主机”交互，例如移动设备（著名的 React Native）、VR 设备、终端（如ink）等。

但是，在浏览器主机中，有一些自定义渲染器在 ReactDOM 内（或代替）操作。


核心问题

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


例子

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

以下来自react-three-fiberthreejs 元素的片段在 React 中声明，并且在后台它将“映射”到特定的画布操作：

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

react-three-fiber正在使用自定义渲染器来实现上述目的，但我认为它也可以通过副作用来实现。Box 可以有一个useEffect对threejs 实例执行操作的。

可能性/假设

那么为什么要选择自定义渲染器呢？我相信它可能是以下零个、一个或多个：

  • 通过绕过生命周期/副作用可以获得一些性能提升？
  • 对排序和安装/卸载进行更严格的控制？
  • 代码的简单性，在设置自定义渲染器的初始障碍之后，其余的映射变得更容易了吗？
4

2 回答 2

4

在 React 中使用自定义协调器有一些有趣的优势。正如您在 react-pixi-fiber 的 README.md 文件中看到的，完全可以使用 ReactDOM 来渲染 pixi 元素，而不是使用来自 react-pixi-fiber 的自定义渲染。

那么为什么要创建自定义渲染器/协调器呢？

在这种特定情况下，原因是 ReactDOM 并没有真正处理画布元素。正如您所说，这可以通过自定义挂钩/组件的组合来实现。如果您阅读 react-three-fiber 的为什么部分，您会发现通过使用他们的自定义协调器，与自定义组件相比，您可以实现两件事：

  1. 来自threejs 的所有东西都可以在这里工作，因为支持是内置在reconciler 中的。
  2. 性能与直接使用threejs时相同，因为reconciler可以更好地控制渲染的内容和时间。

您可以在这里查看对渲染和协调之间的区别的深入解释以及协调器如何细粒度访问：组件生命周期，决定差异以及如何从视图中添加/删除元素（在 DOM 中，画布、iOS 等）。

于 2020-09-25T17:28:45.233 回答
1

传统的反应渲染器暴露了两个功能：render(children, target)和unmountComponentAtNode(target). react-three-fiber 实际上也导出了这两个，它可以像那样使用，但是threejs 特别需要大量的设置和样板文件，这更容易在“Canvas”组件中抽象。该组件担心设置所有内容、调整大小、事件等。它在 DOM 和 react-native 中工作。

Canvas 组件内的所有内容都再次成为常规的 React。您拥有原生元素（网格、组......）、组件、钩子等。因此，当您在 Web 或其他任何地方使用 React 时，您将获得与 React 相同的好处：将关注点打包成可重用、自我管理的成分。

我已经在上面发布了这个：twitter.com/0xca0a/status/1282999626782650368这应该很清楚为什么 React 总是比命令式布局膨胀更合适。

于 2020-09-28T20:32:02.140 回答