大佬,第三方组件的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种:
React
和ReactDOM
版本不匹配
需要v16.8
以上版本的ReactDOM
才支持Hooks
。
我们项目使用的是v17.0.2
,不属于这个原因。
- 打破了
Hooks
的规则
Hooks
只能在函数组件或自定义Hooks
顶层调用。
翻看A
组件源码,报错的是一个顶层调用的useRef
:
function A() {
// ...
var xxxRef = useRef(null);
// ...
}
不属于这个原因。
- 重复的
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
安装:
"dependencies": {
"react": "^16.13.1",
"@babel/runtime-corejs3": "^7.11.2",
"react-dom": "^16.13.1"
},
这样会在组件库目录的node_modules
下创建这两个依赖。
作为一个组件库,这么做显然是不合适的。
临时解决
最好的做法是将这两个依赖作为peerDependencies
,即将其作为外部依赖。
这样,当我们引入组件库时,组件库会使用我们项目中的react
与react-dom
,而不是自己安装一份。
但是我没有这个组件库的权限,只能在自己项目中做文章。
在package.json文档中提供了一个配置项:resolutions
,可以临时解决这个问题。
resolutions
允许你复写一个在项目node_modules
中被嵌套引用的包的版本。
在我们项目的package.json
中作出如下修改:
// 项目package.json
{
// ...
"resolutions": {
"react": "17.0.2",
"react-dom": "17.0.2"
},
// ...
}
这样,项目中用到的这两个依赖都会使用resolutions
中指定的版本。
不管是组件库还是我们的项目代码中的react
与react-dom
,都会指向同一个文件。
现在问题是临时解决了,但是造成问题的原因是什么?
让我们深入Hooks
源码内部来寻找答案。
深入源码
首先让我们思考2个问题:
当我们在一个Hooks
内部调用其他Hooks
时会报开篇提到的错误。
比如如下代码就会报错:
function App() {
useEffect(() => {
const a = useRef();
}, [])
// ...
}
Hooks
只是函数,他如何感知到自己在另一个Hooks
内部执行?
就如上例子,useRef
如何感知到自己在useEffect
的回调函数中执行?
再看另一个问题,我们知道classComponent
有componentDidMount
与componentDidUpdate
两个生命周期函数区分mount
时与update
时。
那么Hooks
作为函数,怎么区分当前是mount
时还是update
时?
显然,Hooks
源码内部存在一种机制,能够感知当前执行的上下文环境。
渐入佳境
在浏览器环境,我们会引用react
与reactDOM
两个包。
其中,在react
包的代码中存在一个变量ReactCurrentDispatcher
。
他的current
参数指向当前正在使用的Hooks
上下文:
var ReactCurrentDispatcher = {
/**
* @internal
* @type {ReactComponent}
*/
current: null
};
同时,在reactDOM
中,在程序运行过程中,ReactCurrentDispatcher.current
会根据当前上下文环境指向不同引用。
比如:
var HooksDispatcherOnMountInDEV = {
useState: function() { // ... },
useEffect: function() { // ... },
useRef: function() { // ... },
// ...
}
var HooksDispatcherOnUpdateInDEV = {
useState: function() { // ... },
useEffect: function() { // ... },
useRef: function() { // ... },
// ...
}
// ...
当处在DEV
环境mount
时,ReactCurrentDispatcher.current
会指向HooksDispatcherOnMountInDEV
。
当处在DEV
环境update
时,ReactCurrentDispatcher.current
会指向HooksDispatcherOnUpdateInDEV
。
再来看useRef
的定义:
function useRef(initialValue) {
var dispatcher = resolveDispatcher();
return dispatcher.useRef(initialValue);
}
内部调用的是dispatcher.useRef
。
dispatcher
即ReactCurrentDispatcher.current
。
function resolveDispatcher() {
var dispatcher = ReactCurrentDispatcher.current;
if (!(dispatcher !== null)) {
{
throw Error( "Invalid hook call. ..." );
}
}
return dispatcher;
}
可以看到,开篇的错误正是由于
dispatcher
为null
时抛出
这就是Hooks
能区分mount
与update
的原因。
同理,DEV
环境,当一个Hooks
在执行时,ReactCurrentDispatcher.current
会指向引用 —— InvalidNestedHooksDispatcherOnUpdateInDEV
。
在这种情况下再调用的Hooks
,比如如下useRef
:
var InvalidNestedHooksDispatcherOnUpdateInDEV = {
// ...
useRef: function (initialValue) {
currentHookNameInDev = 'useRef';
warnInvalidHookAccess();
updateHookTypesDev();
return updateRef();
},
// ...
}
内部都会执行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
感知上下文的实现思路对你有没有启发呢?