Content #
利用 useRef 这个 Hook，我们可以实现一个 useSingleton 这样的一次性执行某段代码的自定义 Hook，代码如下：
import { useRef } from 'react';
// 创建一个自定义 Hook 用于执行一次性代码
function useSingleton(callback) {
// 用一个 called ref 标记 callback 是否执行过
const called = useRef(false);
// 如果已经执行过，则直接返回
if (called.current) return;
// 第一次调用时直接执行
callBack();
// 设置标记为已执行过
called.current = true;
}
从而在一个函数组件中，可以调用这个自定义 Hook 来执行一些一次性的初始化逻辑：
import useSingleton from './useSingleton';
const MyComp = () => {
// 使用自定义 Hook
useSingleton(() => {
console.log('这段代码只执行一次');
});
return (
<div>My Component</div>
);
};
代码中可以看到，useSingleton 这个 Hook 的核心逻辑就是定义只执行一次的代码。而是否在所有代码之前执行，则取决于在哪里调用，可以说，它的功能其实是包含了构造函数的功能的。
如果想要实现只执行一次的功能，用useEffect，依赖项传空数组，不是可以实现吗？为什么要写一个自定义钩子？作者回复: 因为需要在函数体执行之前执行。useEffect 是在 render 完后执行。
Viewpoints #
From #
05｜进一步认识 Hooks ：如何正确理解函数组件的生命周期？