React: [光纤]在服务器上需要react-dom时检查requestAnimationFrame是否抛出

创建于 2017-03-03  ·  5评论  ·  资料来源: facebook/react

您是否要请求功能或报告错误
错误的

目前的行为是什么?
当使用React进行服务器端渲染时,要求react-dom (可传递需要ReactDOMFrameScheduling.js )会引发异常,因为未定义rAF。

Invariant Violation: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers.
    at invariant (app/node_modules/fbjs/lib/invariant.js:44:15)
    at Object.<anonymous> (app/node_modules/react-dom/lib/ReactDOMFrameScheduling.js:30:3)

如果您有一个通用组件,该组件具有客户端库的顶级导入,例如react-router-scroll ,则需要react-dom而不是react-dom/server

预期的行为是什么?
我希望除非真正调用requestAnimationFrame,否则不会收到此错误。 例如:懒惰地检查rAF并定义rIC。

哪个版本的React,以及哪个浏览器/操作系统受此问题影响?
在节点7.7.1上反应16.0.0-alpha.3。 这是在alpha 3中开始发生的,alpha 3附带并启用了Fiber。

最有用的评论

一个实现我预期行为的解决方法是让每个React使用者都在导入的文件中定义一个polyfill,该文件要先于其他文件导入,但是我希望很多人会遇到此问题。 看起来是这样的:

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

所有5条评论

一个实现我预期行为的解决方法是让每个React使用者都在导入的文件中定义一个polyfill,该文件要先于其他文件导入,但是我希望很多人会遇到此问题。 看起来是这样的:

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

我们可以通过延迟初始化rAF polyfill来解决此问题,但是现在我想到了,似乎不幸的是,仅导入findDOMNode (这很可能是组件所做的)会运行整个客户端协调程序初始化代码。

@gaearon应该不是在单元测试中

而且,更重要的是,是否不需要react-dom并在服务器上运行findDOMNode是反模式,并且组件必须避免在服务器上运行的挂钩中使用它们?

而且,更重要的是,是否不需要在服务器上运行react-dom和在服务器上运行findDOMNode是反模式,并且组件必须避免在服务器上运行的钩子中使用它们?

您不应该在服务器上运行它,但是导入它就可以了。 否则,您将如何编写一个在客户端上使用findDOMNode但仍可在服务器上工作的组件?

它不应该被单元测试所困扰

不,测试无法解决这个问题,因为我们在测试环境中建立了一个全球性的rAF polyfill。

编辑:PR仅用于说明。 只需运行单元测试。 没有棉绒和漂亮的运行。

开了一个公关,把想法写在代码中。

我将rAF支票移到

但是现在,如果未填充rAF ,我将失去抛出的能力。 这是您提到的懒惰支票的正确地方吗?

此页面是否有帮助?
0 / 5 - 0 等级