服务器之家

服务器之家 > 正文

大佬,第三方组件的Hooks为啥报错了?

时间:2021-04-09 23:12     来源/作者:魔术师卡颂

大佬,第三方组件的Hooks为啥报错了?

最近工作中遇到个有意思的问题,记录下从问题发现到解决的过程。

这个问题涉及知识点包括:

  • hooks源码逻辑
  • package.json配置

事发

 

某个需求需要引入一个第三方组件库。

当引入组件库中的函数组件A后,React运行时报错:

  • "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons...

从React文档了解到,这是由于「错误使用Hooks造成的」。

官网给出的可能的错误原因有3种:

1.React和ReactDOM版本不匹配

需要v16.8以上版本的ReactDOM才支持Hooks。

我们项目使用的是v17.0.2,不属于这个原因。

2.打破了Hooks的规则

Hooks只能在函数组件或自定义Hooks顶层调用。

翻看A组件源码,报错的是一个顶层调用的useRef:

  1. function A() { 
  2.   // ... 
  3.   var xxxRef = useRef(null); 
  4.   // ... 

不属于这个原因。

3.重复的React

载录自React文档:

  • 为了使 Hook 正常工作,你应用代码中的 react 依赖以及 react-dom 的 package 内部使用的 react 依赖,必须解析为同一个模块。
  • 如果这些 react 依赖解析为两个不同的导出对象,你就会看到本警告。这可能发生在你意外地引入了两个 react 的 package 副本。

读起来好绕,看起来这条的嫌疑最大。

定位问题

 

在报错的useRef中打上断点,发现其来自于:

http://localhost:8081/Users/项目目录/node_modules/组件库/node_modules/react/cjs/react.development.js

在项目里其他调用Hooks但是未报错的地方打上断点,发现资源来自于:

http://localhost:8081/Users/项目目录/node_modules/react/cjs/react.development.js

报错的useRef和项目其他Hooks引用了不同的react.development.js。

翻看「组件库」的package.json,发现他将react与react-dom作为dependencies安装:

  1. "dependencies": { 
  2.   "react""^16.13.1"
  3.   "@babel/runtime-corejs3""^7.11.2"
  4.   "react-dom""^16.13.1" 
  5. }, 

这样会在「组件库」目录的node_modules下创建这两个依赖。

作为一个「组件库」,这么做显然是不合适的。

临时解决

 

最好的做法是将这两个依赖作为peerDependencies,即将其作为外部依赖。

这样,当我们引入「组件库」时,「组件库」会使用我们项目中的react与react-dom,而不是自己安装一份。

但是我没有这个「组件库」的权限,只能在自己项目中做文章。

在package.json文档中提供了一个配置项:resolutions,可以临时解决这个问题。

resolutions允许你复写一个在项目node_modules中被嵌套引用的包的版本。

在我们项目的package.json中作出如下修改:

  1. // 项目package.json 
  2.   // ... 
  3.   "resolutions": { 
  4.     "react""17.0.2"
  5.     "react-dom""17.0.2" 
  6.   }, 
  7.   // ... 

这样,项目中用到的这两个依赖都会使用resolutions中指定的版本。

不管是「组件库」还是我们的项目代码中的react与react-dom,都会指向同一个文件。

现在问题是临时解决了,但是造成问题的原因是什么?

让我们深入Hooks源码内部来寻找答案。

深入源码

 

首先让我们思考2个问题:

当我们在一个Hooks内部调用其他Hooks时会报开篇提到的错误。

比如如下代码就会报错:

  1. function App() { 
  2.  
  3.   useEffect(() => { 
  4.     const a = useRef(); 
  5.   }, []) 
  6.  
  7.   // ... 

Hooks只是函数,他如何感知到自己在另一个Hooks内部执行?

就如上例子,useRef如何感知到自己在useEffect的回调函数中执行?

再看另一个问题,我们知道classComponent有componentDidMount与componentDidUpdate两个生命周期函数区分mount时与update时。

那么Hooks作为函数,怎么区分当前是mount时还是update时?

显然,Hooks源码内部存在一种机制,能够感知当前执行的上下文环境。

渐入佳境

 

在浏览器环境,我们会引用react与reactDOM两个包。

其中,在react包的代码中存在一个变量ReactCurrentDispatcher。

他的current参数指向当前正在使用的Hooks上下文:

  1. var ReactCurrentDispatcher = { 
  2.   /** 
  3.    * @internal 
  4.    * @type {ReactComponent} 
  5.    */ 
  6.   currentnull 
  7. }; 

同时,在reactDOM中,在程序运行过程中,ReactCurrentDispatcher.current会根据当前上下文环境指向不同引用。

比如:

  1. var HooksDispatcherOnMountInDEV = { 
  2.   useState: function() { // ... }, 
  3.   useEffect: function() { // ... }, 
  4.   useRef: function() { // ... }, 
  5.   // ... 
  6. var HooksDispatcherOnUpdateInDEV = { 
  7.   useState: function() { // ... }, 
  8.   useEffect: function() { // ... }, 
  9.   useRef: function() { // ... }, 
  10.   // ... 
  11. // ... 

当处在DEV环境mount时,ReactCurrentDispatcher.current会指向HooksDispatcherOnMountInDEV。

当处在DEV环境update时,ReactCurrentDispatcher.current会指向HooksDispatcherOnUpdateInDEV。

再来看useRef的定义:

  1. function useRef(initialValue) { 
  2.   var dispatcher = resolveDispatcher(); 
  3.   return dispatcher.useRef(initialValue); 

内部调用的是dispatcher.useRef。

dispatcher即ReactCurrentDispatcher.current。

  1. function resolveDispatcher() { 
  2.   var dispatcher = ReactCurrentDispatcher.current
  3.  
  4.   if (!(dispatcher !== null)) { 
  5.     { 
  6.       throw Error( "Invalid hook call. ..." ); 
  7.     } 
  8.   } 
  9.  
  10.   return dispatcher; 
  • 可以看到,开篇的错误正是由于dispatcher为null时抛出

这就是Hooks能区分mount与update的原因。

同理,DEV环境,当一个Hooks在执行时,ReactCurrentDispatcher.current会指向引用 —— InvalidNestedHooksDispatcherOnUpdateInDEV。

在这种情况下再调用的Hooks,比如如下useRef:

  1. var InvalidNestedHooksDispatcherOnUpdateInDEV = { 
  2.   // ... 
  3.   useRef: function (initialValue) { 
  4.     currentHookNameInDev = 'useRef'
  5.     warnInvalidHookAccess(); 
  6.     updateHookTypesDev(); 
  7.     return updateRef(); 
  8.   }, 
  9.   // ... 

内部都会执行warnInvalidHookAccess报错,提示自己在别的Hooks内执行了。

真相大白

 

到这里我们终于知道开篇提到的问题发生的本质原因:

  • 由于「组件库」使用dependencies而不是peerDependencies,导致「组件库」中引用的react与reactDOM是「组件库」目录node_modules下的文件。
  • 项目中使用的react与reactDOM是项目目录node_modules下的文件。
  • 「组件库」中react与项目目录中react在运行时分别初始化ReactCurrentDispatcher
  • 这两个ReactCurrentDispatcher分别依赖对应目录的reactDOM
  • 我们在项目中执行项目目录下reactDOM的ReactDOM.render方法,他会随着程序运行改变项目目录中react包下的ReactCurrentDispatcher.current的指向
  • 「组件库」中的ReactCurrentDispatcher.current始终是null
  • 当调用「组件库」中的Hooks时,由于ReactCurrentDispatcher.current始终是null导致报错

总结

通过分析这个问题,加深了对package.json以及Hooks源码的理解。

不知道Hooks感知上下文的实现思路对你有没有启发呢?

原文地址:https://mp.weixin.qq.com/s/AJCtEXKDp-UKM7Lq4scxSQ

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部