问题标签 [react-fiber]

我现在折磨自己几个小时，找不到答案。React 数据到底在哪里，在什么对象/键下？我发现了一个对象ReactRoot，它似乎存储了有关组件的所有信息，但我不知道它在窗口中的位置（我猜？）对象。

它必须在 window 对象下的某个地方，对吧？

如果您拍摄内存快照并从列表中选择构造函数，chrome 将在（chrome 中的 $0ReactRoot ）下创建对它的引用。$0

编辑

是否有可能 ReactRoot 的声明方式使其他对象无法访问？这在js中怎么可能？React 没有从浏览器中得到任何特殊待遇，是吗？

我正在调试反应源代码，一切都很好，直到我采用并发模式。当我像这样使用 ReactDOM.createRoot 时：

App 组件无法挂载到 DOM 中，控制台中没有错误和警告，但 ReactDOM.render 很好。

在此处输入图像描述

存储库是https://github.com/neroneroffy/react-source-code-v16.13.0

npm install你可以通过&&克隆和运行npm start

任何帮助将不胜感激

我在页面上说过大约 30K+ 组件。单击按钮后，我通过条件渲染卸载所有 30K+ 组件，这在 10+ 秒左右变得超级慢并导致页面挂起。另一方面，在父容器上将 innerHTML 设置为 "" 可以在几毫秒内完成。但是 innerHTML 方法的问题是 React 无法知道这些组件是否已从 DOM 中删除，因此在下一次渲染时，所有 30K+ 组件都会重新出现。有什么方法可以使用 innerHTML 删除所有节点，但仍确保 React 知道所有组件都已卸载？

序幕

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

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

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

核心问题

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

例子

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

• https://github.com/michalochman/react-pixi-fiber
• https://github.com/react-spring/react-three-fiber

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

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

可能性/假设

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

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

考虑以下代码

我只想在第一次渲染后或更改时运行该effect函数。v

我的问题是

1. 我需要检查是否有v变化effect吗？或者我可以依靠 react 来检查依赖列表的值（即[v]）。
2. 如果 1. 的答案是后者，这种行为是否应该在不久的将来改变？例如，当并发模式被释放时。

从反应官方文档

有条件地触发效果

效果的默认行为是在每次完成渲染后触发效果。这样，如果其依赖项之一发生更改，则始终会重新创建效果。

它说如果 one of its dependencies changes，那么，an effect is recreated。但是，它没有提到相反的情况：当且仅当其依赖项之一发生更改时，才会重新创建效果。

我只记得在hook的早期，我在某处读到该effect函数在某些情况下即使不更改也可以运行，v以优化内存，还是在并发模式下？我实在记不太清了，也查不到出处。

如果有人能告诉我 React 到底是怎么做的，或者参考 react 的相关内部源代码，那将非常有帮助。我认为他们会对第一次渲染进行特殊检查，否则，在v第undefined一次渲染之后，effect将不会运行。

我在以下代码上运行了探查器：

这是相当标准的，有趣的是unstable_runWithPriority 函数。它将优先级作为参数但不安排任何事情，而是调用事件处理程序。

不管优先级是什么，它都一样运行。有人可以详细说明此功能的必要性吗？

不应该根据优先级安排某种任务或微任务吗？

我正在使用 react reconciler 编写自定义渲染器。

computeLayout当树发生一些变化时，我的渲染器应该调用。

我可以在 , 的尾部插入函数computeLayout调用appendChild，这会导致树发生变化。但是，当单个状态更新触发了对这些函数的多次调用时，效率会非常低。removeChildcommitUpdate

我需要的是某种批处理。但是如果我使用requestanimationframeto batch computeLayout，那么用户可能会暂时看到错误的布局。

我希望 react reconcilercomputeLayout在应用每个树修改之后以及在它终止之前调用我，以允许浏览器应用所有 DOM 更新。我们有这样的回调方法吗？resetAfterCommit在这种情况下我可以使用方法吗？

我读过几篇文章，其中React Fiber有一些问题。

1. 与以前stack reconciliation的为什么父级优先，深度优先搜索是不可能的？我看到帖子说React Fiber是通过启用这些功能的链表实现的。但帖子还提到stack reconciliation“递归”工作。有什么区别？

2. React Fiber 保持current树和workInProgress树。React Fiber 的关键特性之一是它不会重新创建 React 元素，而只会更新（变异）更改。这是否意味着current树和workInProgress树共享（引用）相同的元素还是克隆？

3. 如果 React Fiber 可以恢复和暂停，这是否意味着它会跟踪当前进度并在 16 毫秒截止日期到来时停止并提交所做的任何事情？并从它停止的地方继续？

4. 在 React Fiber 之前，元素是不可变的。这是否意味着如果 React 发现了一个必须修改的元素，它的所有子元素都被重新创建并附加到新创建的元素上？

作为一个非英语母语的人，我对 React 源代码中的“被动效果”一词感到schedulePassiveEffects困惑cancelPassiveEffects。这里的“被动”到底是什么意思？

我是 React Spring + Fiber 的新手，但我在使用 useTransition 时发现了一个问题，在输入动画后显示生涩的动作。

代码：https ://codesandbox.io/s/popis-bugu-ivmfv?file=/src/App.js

你知道我做错了什么吗？