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

写在前面

在 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;

总结一下

为什么 MyComponent 会刷新​​​​​​？

当我们在 MyComponent 中使用 useForceUpdate hook 时，useForceUpdate 内部的状态 tick 会成为 MyComponent组件 的一部分。

调用 forceUpdate 函数会更新 tick 状态，触发 MyComponent 的重新渲染。

这是因为 react 的状态更新机制会导致使用该状态的组件重新渲染，即使这个状态在组件中没有直接使用。