问题标签 [react-fiber]

根据新的React 16 发布文档，它说

“React 16 将渲染过程中发生的所有错误打印到开发中的控制台，即使应用程序不小心吞下了它们。”

我有一个父组件和一个子组件。我在 then 承诺块中触发了一个错误。但它会调用 promise 的 catch 方法，不会调用父组件的 componentDidCatch。我不确定这是否是预期的行为。

这是jsfiddle https://jsfiddle.net/john1jan/Luktwrdm/14/

在 React v16 之前——也就是说，在引入 React 纤程之前——可以获取一个 DOM 元素并检索 React 组件实例，如下所示：

这不再适用于使用新 Fiber 实现的 React v16。具体来说，上面的代码在该行引发错误，const comparWrapper = compInternals._owner因为_owner不再有属性。因此，您也无法访问_instance.

我的问题是我们如何从 v16 的 Fiber 实现中的 DOM 元素中检索实例？

React 16 带来了新的核心架构。他们研究了一种新的异步渲染机制，这可能会使动画更加流畅。但尚未启用异步渲染。

我在 Firefox 中的反应应用程序存在一些性能问题。我会尝试启用异步渲染是否有帮助。

如何在 react 16 中启用异步渲染？

我在 React Fiber 上编写了组件。这个组件接收 1 个 cond 道具，这是真的，渲染孩子。

在 React Fiber 之前，此代码有效。但是现在，React Fiber 会导致错误。

我猜 React Fiber 在渲染组件之前渲染子组件。但是这种行为破坏了组件。

我可以停止组件的预渲染子组件吗？

我似乎无法使用名称字符串呈现组件。我希望能够动态生成组件名称字符串，这些字符串具有可以呈现的现有相应组件。

const将array通过 JSON 数据填充，这就是为什么我需要使用string值来识别组件。

这是我正在尝试做的事情：

React 不是引用现有组件并呈现它，而是呈现一个全小写的自定义元素标签。

注意：这些组件['Module1', 'Module2', 'Module3']创建为extends Component

我注意到新功能portals做同样的事情但更好？我对门户不太了解，但它似乎是管理嵌套组件更新的新方法？我知道 Reacts Context API是实验性的，并且注意到componentDidUpdate不再接收prevContext并且它们丢弃了contextTypes.

我还注意到他们正在引入React 16 的 Portal API，但不确定这是否是为了取代 Context API。

那么，如上所述，React 16 的 Portal API 是否意味着要替换 Context API？

编辑：为了搭载这个主题，conext 是管理 i18n 本地化的最佳方法吗？

我有一个具有以下结构的 React 应用程序：

组件A由B和C组成

当组件B调用它的componentDidMount方法时，是否所有组件都已完成安装？

或者换句话说，ReactcomponentDidMount在树中的所有组件都安装后会触发吗？

或者例如，当组件A安装时调用组件B ？ componentDidMount

假设我在 React 16 应用程序中有这样的组件层次结构：

组件A由组件B和C组成

这些组件由具有一些非零高度的块 HTML 元素表示。

在componentDidMount组件B中，我使用 vanilla JavaScript 来找出折叠元素的高度。这使得底层 DOM 发生了变异。

在componentDidMount组件C的方法中，我还使用 vanilla JS 来了解组件B和C顶部的偏移量。

我知道这两个组件的偏移量不能相同，但在我最初的代码版本中是相同的。在将偏移量计算功能包裹起来后，setTimeout我得到了很好的测量结果。

有没有办法对组件 B 中的排列进行连线整理，所以我不会setTimout在组件 C 中使用带有神奇100ms 的调用？

我正在开发的应用程序基于 React Fiber 和 React Router V3。

尝试使用异步组件hydrate()而不是异步组件时，我遇到了以下问题：从 SSR 返回的 HTML 与客户端不同。render()

结果，React 重新挂载了整个 DOM 并抛出以下警告：Did not expect server HTML to contain....

React Training 也不提供解决方案：代码拆分 + 服务器渲染

有什么解决方案可以实现这一目标吗？

更新：

简单示例

（伪代码）

应用程序.js：

客户端.js：

服务器.js

我正在使用 React 16（光纤引擎），需要查看/识别主线程部分中的特定时刻，以查看之后发生的情况。

因此，我想出了一些想法，将一些代码放在那里会产生一些峰值，并使我能够在图表上看到开始发生某些事情的确切位置。

如何在 DevTools 中识别火焰图中执行的时刻？