问题标签 [react-fiber]

我最近观看了 Lyn Clarke 的视频，指出 ReactJS 16.2.0 或 React Fiber 为我们提供了一个平台，我们可以在其中拥有平滑的 CSS 过渡和动画。我通过转换并创建 999 个项目的列表并通过单击按钮更新所有 999 个项目来尝试相同的事情。单击按钮后，我对转换产生了闪烁效果，这不应该按照文档。我在代码中做错了什么？下面是我的组件：

CSS：

React.Component 生命周期中的“this”怎么可能变成了不同的对象？inrender()和 incomponentDidMount() this指向不同的对象？

1. 我使用反应 16.0.0
2. 所有生命周期方法只调用一次
3. 我用 Webpack 转译 Typescript
4. 我无法在浏览器中重复它，在浏览器中one === two // true
5. 我有一个非常大的应用程序，所以我认为它可以是 ReactFiber 某种优化？

喜欢这里：JsBin

我有一个 es6 react 组件，我希望状态的初始值取决于传递的 prop 的初始值，但它的值始终为 false：

AttachStateToProps 组件

AttachStateToProps 组件：

每次更改道具 VALUE 的值时，我都会得到：

和

我认为这可能与 state/setState 异步且较旧getinitialState有关，但我不明白为什么。

在这个链接上（很多人提到，为了理解React 16的架构）它被提到：

甚至 React 中的 Elements 也是包含组件信息的普通 JS 对象，具有以下四个属性：

我现在想知道 Component、Element、Instance 和这个新的Fiber对象之间的明显区别。此外，这个新的 Fiber 对象是否与图片中提到的具有更多新属性的旧 Element 对象相同？

动机：我正在开发一个应用程序，它的某些部分每秒渲染多次，并且在某些情况下可能会执行大量渲染。我希望它赋予用户操作优先于其他所有内容，即使在那些繁重的渲染情况下也是如此。

我了解到 React 16 调度算法（也称为 React Fiber）

1. 将交给主线程的工作拆分成块，防止过载导致主线程无法渲染 UI。
2. 提供一种为特定任务（如用户操作）赋予不同优先级的方法，以便在低优先级任务之前对其进行处理。

是否有提供这两种功能的角度机制？

（我假设ngrx可以提供一些优势，因为所有的动作/事件都是异步的，所以第二个特性对我来说更重要）

我有一个自定义的 React Fiber Reconciler，我使用react-reconciler包中的默认导出创建它。在 ReactDOM 组件中，我执行

但是，当我打开 React devtools 时，我得到

这似乎是因为fiber.type为空。环顾四周，我看到人们将类型作为第二个参数传递给他们的渲染器的 createContainer，但是这样做给了我一个奇怪且看似无关的错误

，所以这可能不是正确的做法。

主机配置很长，所以这里有一个要点：https ://gist.github.com/arilotter/d34c684da13a4825285ddfe021ec4be3

这是我的package.json： https ://gist.github.com/arilotter/fd53712900f726a46c1d9a6ceeaf151c

我可以在哪里type为我的容器指定，以便 devtools 工作？

我正在尝试编写将大量组件逐步呈现到屏幕上的代码，我的理解是 react-fiber 应该有助于该过程。有没有办法测试它是否真的有帮助？

我想这样做的全部原因是让前一百行快速渲染，而最后一百行，比如说，2000 可以渲染得更慢，因为它们在页面加载时超出了用户的窗口

这不是我的实际代码，更多只是一个概念证明，但它仍然只是一次全部弹出，并且查看性能浏览器工具，它似乎也被同时渲染了。

https://do-react-fibers-do-anything.glitch.me/

如果这有意义的话，我希望它以更分段的方式呈现。我是在尝试错误地测试/可视化它还是发生了其他事情？谢谢

我有一个非常大的应用程序，到处都有高阶组件。我的情况是，我的一个控件获得了正确的道具并正确渲染，然后立即获得了错误的道具并再次重新渲染。我无法弄清楚是什么触发了第二次重新渲染。这不是因为父组件获得了新一轮的 props，而是更像是一些高阶组件调用setState

无论如何，所以我的调试器位于render方法内部的断点处，我怎么知道是什么在更高级别触发了它？

堆栈并没有多大帮助，我所看到的只是内部的 React 调用：

最近我在看一个关于 React Fiber 的视频，让我感到困惑的是每个工作循环的时间是从哪里来的。它是恒定的还是可变的，取决于任何变量？

一开始我以为是1000/60 ~= 16.6 ms，直到看到这张图

我一直在阅读有关 React Fiber 的内容，并且经常看到“和解”和“渲染”这两个术语经常一起使用。在 React 的上下文中，有人可以帮我理解这两个术语之间的区别吗？

一些背景：

• 看了Lin Clark 关于 React Fiber 的演讲后，我产生了这个疑问
• 为了理解这一点，我阅读了另一篇有用的文章——React 如何处理事件。我相信这篇文章有答案，但似乎它的目标受众是已经对 React 有高水平理解的人。但是，我正在寻找更简单的解释（因为我仍处于 React 的初学者水平）。