实现一个自定义 hook，用于强制刷新当前组件

news2024/11/16 0:01:19

写在前面

在 react 中，如果 state 数据发生变化，我们知道，会重新渲染该组件。

但是这个前提是我们需要依赖 state 数据的变化，那比如我们并不想定义 state，又或者说我们的操作不能引起 state 的变化，此时我们也想刷新组件怎么办？

这里我们就来实现一个自定义的 hooks，它的作用就是强制刷新当前组件。

实现

如果想刷新组件，很重要的一点就是改变 state，当 state 的值发生变化时，组件会重新渲染。

一个重要的点：react hook 和组件的关系

当在组件中使用一个自定义 hook 时，这个 hook 的状态和逻辑会成为该组件的一部分。
具体来说，hook 内部的状态会被管理在使用这个 hook 的组件的状态树中。

通俗点说就是，我们自定义一个 hook，并且在组件中使用，那这个 hook 的 state 也会成为这个组件的一部分，也就是 hook 的 state 变化，会引起使用该 hook 的组件的变化。

说的太多可能还不明白，我们直接看代码。

hook

我们先自定义一个hook，实现原理就是利用 state 的变化，每次调用该 hook 的时候，state 的值都会发生变化。

使用 useState 来存储一个计数器 tick。
setTick 每次调用时会增加计数器，这会触发组件重新渲染。
使用 useCallback 确保 forceUpdate 函数在组件的整个生命周期内保持相同的引用。
返回 forceUpdate 函数，以便在使用这个 hook 的组件中调用它。

import { useState, useCallback } from "react"; 
const useForceUpdate = () => { 
const [, setTick] = useState(0); 
// 只需要 setTick 函数，不需要 tick 值
const forceUpdate = useCallback(() => { 
setTick(tick => tick + 1); // 使用回调函数来确保更新基于最新状态 
}, []); 
return forceUpdate; // 返回 forceUpdate 函数 
}; 
export default useForceUpdate;

忽略状态值

这里的逗号（,）表示我们只解构出数组的第二个元素 setTick，而忽略第一个元素。

因为我们只需要 state 发生变化，不需要使用该 state，直接写为空也行。

const [, setTick] = useState(0);

组件使用

组件使用就比较简单了，直接引入 useForceUpdate，并在需要调用的时机执行即可，为了证明是否刷新，我们打印了一条语句并执行了随机时间显示到页面上，我们来看一下效果。

import React from "react"; 
import useForceUpdate from "./useForceUpdate";
 const MyComponent = () => { 
const forceUpdate = useForceUpdate(); 
// 获取 forceUpdate 函数 
const handleClick = () => { 
forceUpdate(); 
// 调用 forceUpdate 函数触发重新渲染 
}; 
console.log('组件刷新！'); // 每次重新渲染时打印日志 
return 
( 
<div>
<p>当前时间: {Date.now()}</p> 
<button onClick={handleClick}>强制刷新</button> 
</div> 
); 
}; 
export default MyComponent;