CHEEMS的小窝

1. 现象描述#

逻辑很简单：

1. useState 初始化一个 log 字符串。
2. 一个 useEffect 监听 log 变化，只要有更新就 save 到本地数据库。
3. 另一个 useEffect 在组件挂载时，从数据库 get 出数据并 setLog。

Bug：刷新页面，控制台数据库里曾有过数据，但瞬间变成了空字符串。

2. 为什么数据被抹除了？#

问题出在 React 组件的生命周期和异步操作的时间差上：

1. 第一步（初始化）： 组件挂载，log 的初始状态是 ''（空字符串）。
2. 第二步（执行监听逻辑）： 监听 log 的 useEffect 发现 log 发生了变化（初始化）。此时，从数据库读取旧数据的异步操作还没完成，这个 Effect 就拿着初始值 '' 去执行了保存，把数据库里的旧数据覆盖了。
3. 第三步（读取结束）： 异步读取终于拿到了结果，但此时数据库里已经是刚才被覆盖掉的空字符串了。

3. 解决方法：给保存逻辑加状态锁#

我们需要确保在数据从数据库恢复到 State 之前，严禁往数据库写回任何数据。

这里适合用 useRef 来做一个“初始化锁”。

修正后的逻辑：

1
const [log, setLog] = useState('');
2
const inited = useRef(false); // 初始化锁
3

4
// 挂载时异步读取
5
useEffect(() => {
6
    db.getCache().then(res => {
7
        setLog(res || '');
8
        // 读取完成并赋值后，取消锁 (标记为已初始化)
9
        inited.current = true;
10
    });
11
}, []);
12

13
// 监听变化并保存
14
useEffect(() => {
15
    // 如果锁没取消 (还在初始化)，直接跳过保存
16
    if (!inited.current) return;
17
    saveToDB(log);
18
}, [log]);

4. 为什么用 useRef 而不是 useState？#

1. ref.current 的修改是立即生效的，而 useState 的更新是异步的。在处理生命周期边缘的逻辑时，同步的标记位更安全。
2. 修改 ref 不会触发组件重新渲染。