问题标签 [react-fiber]

来自关于 Virtual DOM的 ReactJS wiki页面：

React 创建一个内存数据结构缓存，计算结果差异，然后有效地更新浏览器显示的 DOM。这允许程序员编写代码，就好像每次更改都会呈现整个页面，而 React 库只呈现实际更改的子组件。

换句话说，Virtual DOM 允许我们通过避免直接操作 DOM 来提高性能。

但是React Native呢？

我们知道，理论上在其他平台上存在原生视图和 UI 组件。DOM 本身并没有什么。那么我们可以说 React Native 有“虚拟 DOM”还是我们在谈论其他东西？

例如，Weex规范中有一节描述了直接使用 DOM-tree 的方法。我的假设是，我们可能会认为 React Native 也应该有某种 DOM 树以及“虚拟 DOM”抽象层，这是 React 本身的主要思想。

所以我的问题是：

React Native 是否有某种“虚拟 DOM”（或其表示形式），如果有，如何将这种“虚拟 DOM”移植到各种平台？

更新：

这个问题的目的是阐明 React Native 如何管理原生 UI 组件的渲染。有没有具体的方法，如果有，它是如何正式命名的？

更新 2：

本文描述了名为Fiber的新 React 架构，它看起来像是这个问题的答案。

我在这个错误上花了几个小时，我希望另一双眼睛可以帮助我！感谢您的帮助！

我有一个 React Native 应用程序，在 Modal 中，我有一个带有单选按钮的选项列表。

我想要什么：当您单击模型列表中的 TouchableHighlight 项目时，我希望单选按钮移动到用户按下的项目。换句话说，我想设置单选按钮，就selected好像我按下了我点击的项目的rowId一样。

发生了什么：当我关闭 Modal 并重新打开时，我看到单选按钮已移动到正确的选项，但问题是我需要单选按钮在单击时立即移动！因此，我设置了正确的状态，但在我重新打开 Modal 之前，组件不会重新渲染。

这是我的自定义单选按钮组件：

我有一个处理状态的容器组件：

SelectShippingMethod 是一个组件，它返回各个 TouchableHighlight 项，并selected作为来自容器组件的 prop 传递。

ShippingMethodOptions 是一个包裹 ListView 并向下传递适当道具的组件。

当我使用 Fiber 升级到 React 16 时，我注意到单选按钮按预期工作，所以这让我想知道一些事情。

1. 光纤的速度快到我可以编写更错误的代码了吗？

2. 使用更新的 React 版本时，Modal 组件中的生命周期方法有什么不同吗？

3. setState 有什么不同导致更多的东西用纤维重新渲染吗？

更新 我已经在控制台记录了这个过程，我看到在按下一个项目后，ListView 上的 renderRow 不会再次被调用，而是 SelectedShippingMethod 被选中并被调用undefined。为什么会发生这种情况，我怎样才能让它工作？

我正在尝试检查用户集合中是否存在用户名，在检查数据的实例中，函数运行速度比调用方法快（众所周知）。当用户检查时，这导致 Session 落后一步可用性的用户名。

我被这些困扰了很长时间，如果您有解决方法，我将非常感激。

这是代码：

编辑：

只需使用以下代码更改 getValidationState() ，它就会像魅力一样工作。

我刚刚听说 react-fiber 准备好了。react和react-fiber之间的最大区别是什么？为这些差异学习全新的概念是否值得？

我正在使用带有服务器端渲染的 React 16 beta (react-fiber)

我要理解这是什么意思？

有没有人将他们的 ag-grid 安装升级到 React 16 aka Fiber？我升级到 react@next 和 react-dom@next，立即得到一个致命错误。我的工具非常基于 ag-grid-react-example，问题似乎出在单元格编辑器上。有人见过类似的吗？

hydrate已登陆 React 16，但尚未记录其使用。

本文建议它应该与一起使用，renderToNodeStream但没有提供太多细节。

的预期用途是hydrate什么？

renderToString是同步的。它也无法处理重新渲染的组件，即在初始渲染期间组件状态发生同步（即相同的滴答声）更改并且应该触发其他render调用时。该示例是 Helmet，它需要一种解决方法才能将更改从嵌套传播Helmet回服务器端的顶级组件。

是否可以帮助避免限制hydrate并在服务器端呈现异步和/或重新呈现的组件？renderToNodeStreamrenderToString

我想使用 React v16.0.0 上的新功能来返回一个字符串，然后在

<img src="returnedString" >

当前的行为是什么？

好吧，如果我将我的组件呈现在 <div > <MyComponent /> </div>

我可以看到屏幕上显示的字符串（见附件截图），但我的目标是在<img src="returnedString" />

这是我的代码：

我怎样才能做到这一点？

预期的行为是什么？

我想在一个里面使用返回的字符串

哪些版本的 React ？

反应 v16.0.0

这在以前版本的 React 中有效吗？

不，因为它是 React v16.0.0 中的新功能

我已经阅读了文档，但我并没有真正理解React 16hydrate()之间的区别。render()

我知道hydrate()用于结合 SSR 和客户端渲染。

有人可以解释什么是保湿，那么 ReactDOM 有什么区别？

从哪里开始...我正在使用create-react-app生成启动器 reactjs-redux-typescript-webpack-donetcore 应用程序。在构建过程中，它抛出了许多本质上相似的错误——反应类型不匹配。生成的代码似乎与我在网上找到的其他示例一致，因此我不清楚哪里出了问题或如何解决这些错误。我将列出适当的配置文件、有问题的 tsx 文件和第一个错误（因为它在其他 tsx 文件中很常见）。

我试过的

我认为该问题与新的 reactjs rewrite (v16) 与生成的代码不兼容有关，因此我对代码库使用了react-codemod迁移实用程序 - 没有修改文件。

TIP用于-d空运行

同时，我将阅读 tsx/jsx 并查看是否有任何点击，因为所有 reactjs/typescript 对我来说都是新的。

webpack 命令：

使用的 package.json 依赖项

tsconfig.json

错误

引导客户端.tsx

计数器.tsx