在依赖项数组中添加一个空字符串会有什么效果？

在 useEffect 的依赖项数组中添加空字符串 ""，其效果与添加其他固定值（如 123、null 等）类似，具体表现为：

核心行为

• 初始挂载时：useEffect 的副作用函数会执行（与其他依赖项的初始执行逻辑一致）。
• 后续更新时：由于空字符串 "" 是一个常量（不会发生变化），依赖项数组不会触发更新，因此副作用函数不会重新执行。

示例说明

useEffect(() => {
  console.log("副作用执行");
  return () => {
    console.log("清理函数执行");
  };
}, [""]); // 依赖项为固定空字符串

• 组件首次渲染时，会打印 副作用执行。
• 当组件因其他状态（如 useState 变量）更新而重新渲染时，由于 "" 没有变化，副作用函数不会再次执行，清理函数也不会触发。
• 只有当组件卸载时，清理函数才会执行（打印 清理函数执行）。

与空依赖数组 [] 的对比

空字符串依赖 [""] 和空依赖数组 [] 的行为完全一致，因为两者都是“不会变化的依赖项”。

// 以下两种写法效果相同
useEffect(() => { /* ... */ }, []);
useEffect(() => { /* ... */ }, [""]);

两者都会：

1. 仅在组件挂载时执行一次副作用。
2. 仅在组件卸载时执行清理函数。
3. 组件更新时不会重新执行副作用。

注意事项

虽然 [""] 和 [] 效果相同，但推荐使用空数组 []，原因是：

• 空数组 [] 是 React 官方文档中明确推荐的“只执行一次”的写法，语义更清晰。
• 空字符串作为依赖项容易让其他开发者误解其用途（可能误以为它会动态变化）。

只有当依赖项可能发生变化时，才需要将其加入依赖数组。对于固定值（包括空字符串），添加到依赖数组中不会改变副作用的执行逻辑。