React: 当组件在服务器端呈现时,useCallback 返回 undefined

创建于 2018-11-15  ·  4评论  ·  资料来源: facebook/react

您要请求功能还是报告错误

漏洞。

目前的行为是什么?

当组件在服务器端呈现时, React.useCallback返回undefined

如果当前的行为是一个错误,请提供重现的步骤,如果可能,请提供问题的最小演示。 将链接粘贴到您的 JSFiddle (https://jsfiddle.net/Luktwrdm/) 或 CodeSandbox (https://codesandbox.io/s/new) 示例如下:

这个错误可以通过使用useCallback创建一个 React 组件来重现。 在服务器上记录返回值会产生undefined同时它会在浏览器中正确返回函数。

您可以在此 CodeSandbox 中观察此错误: https ://codesandbox.io/s/r557kww6wn 应用程序正确呈现为字符串错误,查看控制台,您将看到useCallback的返回值为undefined

这是完全相同的应用程序,但在客户端呈现: https://codesandbox.io/s/xvwv797pxz该函数已正确记录到控制台。

什么是预期行为?

React.useCallback应该返回记忆的回调,而不是undefined

哪些版本的 React 以及哪些浏览器/操作系统受此问题影响?

  • 反应:16.7.0-alpha.2
  • 反应域:16.7.0-alpha.2
Hooks Bug

最有用的评论

我相信这是一个错误; 那个代码注释是错误的。 我的理解是使用 useCallback 进行渲染阶段回调是正确的。

所有4条评论

这是故意行为。

回调不在服务器环境中执行。

我认为其基本原理是,由于回调用于诸如onClick类的事件处理程序,这在 SSR 期间没有意义,因此 React 并不真正需要跟踪它们,从而释放将要使用的资源不必要地通过跟踪永远不会使用的钩子。

别担心,补水时,回调会在那里。

但是,我能问一下你到底想做什么吗?

谢谢@arianon 👌 我正在遵循redux-react-hook的建议,将useCallback与他们的useMappedState 一起使用。 从概念上讲,我正在记忆的函数并不是真正的回调。 起初我没有注意这一点,因为该术语往往用于各种上下文。 此外,文档提到:

useCallback(fn, inputs)相当于useMemo(() => fn, inputs)

我将在 docs 存储库上打开一个问题以建议更新 😉 再次感谢!

我相信这是一个错误; 那个代码注释是错误的。 我的理解是使用 useCallback 进行渲染阶段回调是正确的。

AFAICT 唯一不应该在服务器端运行的是 Effects 和 ref 属性初始化。 一个有效的 useCallback 很重要,例如,渲染道具 HOC 模式,它将在很长一段时间内仍然与生态系统一起存在。

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