写在前面
笔者最近看到这样一道面试题,如题目所示,觉得挺有意思的,在这里分享一下,感兴趣的小伙伴也可以思考一下怎么实现,可以在评论区讨论一下,我再详细说一下什么意思。
自定义一个 hook,如果监听到组件重新渲染,则在当前页面进行响应。(首次加载组件不执行)
思考
我们可以先想一下,如果不自定义钩子函数,如何监听组件的重新渲染?
我们知道在 react 中,当依赖发生变化时
,会重新渲染
组件,那我们可以结合 useEffect 添加依赖项
,这样当依赖变化时,就可以监听到了。
代码如下:
js
function Demo() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log('依赖为[count]------------------------', count)
}, [count])
return (
<div>
<p>count的值为: {count} </p>
<button onClick={() => setCount(count + 1)}>add</button>
</div>
)
}
但是这样写的弊端在于,useEffect 只会在依赖变化时重新渲染
,如果我们组件中还有其他依赖发生变化,就监听不到了。
所以我们可以不写 useEffect 的依赖项
,当 useEffect 的依赖项不存在
时,会在组件重现渲染时执行
,而不依赖于任何依赖项变化。
js
function Demo() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log('无依赖为[count]------------------------', count)
})
return (
<div>
<p>count的值为: {count} </p>
<button onClick={() => setCount(count + 1)}>add</button>
</div>
)
}
但是这样会在组件第一次进入也执行,我们只希望组件重新渲染时执行,增加判断条件即可。
使用 useRef
返回的对象的 .current
属性可以在组件的整个生命周期内保持不变,即使组件重新渲染。
js
function Demo() {
const [count, setCount] = useState(0)
const isMounted = useRef(false)
useEffect(() => {
if (isMounted.current) {
//执行代码
} else {
isMounted.current = true;
}
})
return (
<div>
<p>count的值为: {count} </p>
<button onClick={() => setCount(count + 1)}>add</button>
</div>
)
}
这样只会在页面重新渲染时执行这个 useEffect,现在我们把它封装成 hook。
实现
现在只需要接收一个函数,用于监听到变化时执行我们需要的逻辑即可。
js
//useEffectOnUpdate.js
import { useEffect, useRef } from 'react';
export const useEffectOnUpdate = (effect) => {
const isMounted = useRef(false);
useEffect(() => {
if (isMounted.current) {
effect();
} else {
isMounted.current = true;
}
});
};
页面中使用
js
import { useEffectOnUpdate } from '../hook/useEffectOnUpdate'
import React, { useEffect, useState } from 'react'
// 使用示例
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffectOnUpdate(() => {
console.log('Component updated!');
});
return (
<div>
<p>count的值为: {count} </p>
<button onClick={() => setCount(count + 1)}>add</button>
</div>
)
};
总结
我们在实现的时候可以先想一下,如果不是封装 hook,在组件内实现应该怎么做,进而将思路理清,然后将实现的代码再转化为 hook 即可。
在这个案例中,需要理解 useEffect 的使用,主要是对 useEffect 依赖项不同情况的理解,包括有依赖项
,依赖项为空数组
,无依赖项
三种情况。