标签: react-fiber

我刚刚听说反应纤维准备好了.反应和反应纤维之间的巨大差异是什么？学习这些差异的全新概念是否值得？

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

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

有人可以解释什么是保湿,然后ReactDOM有什么区别？

从ReactJS wiki页面关于Virtual DOM:

React创建一个内存中的数据结构缓存,计算产生的差异,然后有效地更新浏览器显示的DOM.这允许程序员编写代码,就像在每次更改时呈现整个页面一样,而React库只渲染实际更改的子组件.

换句话说,Virtual DOM允许我们通过避免使用DOM直接操作来提高性能.

但是React Native怎么样？

我们知道在其他平台上理论上有本机视图和UI组件.DOM本身没有任何内容.那么我们可以说React Native在那里有"Virtual DOM",或者我们正在谈论别的东西吗？

例如,有一个部分在Weex规范,其描述的方法直接DOM树的工作.我的假设是,我们可以认为React Native也应该有某种DOM树以及"Virtual DOM"抽象层,这是React本身的主要思想.

所以我的问题是:

React Native是否有某种"虚拟DOM"(或其表示),如果是这样,这个"虚拟DOM"如何被移植到各种平台？

更新:

此问题的目的是阐明React Native如何管理本机UI组件的呈现.有没有具体的方法,如果有的话,它是如何被官方称为？

更新2:

本文介绍了名为Fibre的新React架构,它看起来像这个问题的答案.

我正在使用React 16 beta(反应光纤)和服务器端渲染

我明白这是什么意思？

warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>.

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

组分A由B和C组成

当组件B调用它的componentDidMount方法时,所有组件完成安装是否正确？

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

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

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

this.mountNode = CustomRenderer.createContainer(this.stage)
CustomRenderer.updateContainer(
  <SomeContextProvider>{children}<SomeContextProvider/>,
  this.mountNode,
  this
)

但是,当我打开React devtools时,我明白了

Uncaught TypeError: Cannot read property 'replace' of null  in the getDataFiber method here:
    case HostComponent:
        nodeType = 'Native';
        name = fiber.type;

        // TODO (bvaughn) we plan to remove this prefix anyway.
        // We can cut this special case out when it's gone.
        name = name.replace('topsecret-', ''); /////////// Error here on this line 

这似乎是因为fiber.type是null.搜索周围,我看到人们将一个类型作为第二个参数传递给他们的渲染器的createContainer,但这样做会给我一个奇怪的,看似无关的错误

Uncaught TypeError: scheduleDeferredCallback is not a function
Uncaught TypeError: cancelDeferredCallback …

序幕

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

我们也有定制阵营可用于接口渲染器的“主机”即不是DOM的环境，如移动装置（著名阵营母语），VR设备，终端（如墨水），等等。

然而，有一些自定义渲染器在浏览器主机中运行（或代替） ReactDOM。

核心问题

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

例子

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

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

以下来自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 实例执行操作的对象。

可能性/假设

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

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

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

我还注意到他们正在引入React 16的Portal API，并且不确定是否打算取代Context API。

因此，如上所述，React 16的Portal API是否打算取代Context API？

编辑：piggy带上这个主题，是在反应中管理i18n本地化的最佳方法吗？

我对以下代码运行了分析器：

function App() {
  const [ counter, setCounter ] = useState(0);
  return <div>
    <div>{counter}</div>
    <button onClick={(e) => setCounter(counter + 1)}>Inc</button>
  </div>
}

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

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

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

hydrate已降落到React 16,但其使用尚未记录.

本文建议它应该与之一起使用,renderToNodeStream但不会提供太多细节.

预期用量是hydrate多少？

renderToString是同步的.它也无法处理重新渲染的组件,即在初始渲染期间在组件状态中发生同步(即相同滴答)变化并且应该触发其他render调用.示例是Helmet,它需要一种解决方法,以便将更改从嵌套Helmet回传播到服务器端的顶级组件.

可以hydrate并且renderToNodeStream有助于避免renderToString限制并在服务器端呈现异步和/或重新呈现的组件吗？