WHAT - React 惰性初始化

news2025/4/18 1:56:53

在 React 中如何使用惰性初始化

React 的 useState 钩子支持惰性初始化，它允许你传入一个函数来计算状态的初始值，这个函数只会在组件首次渲染时执行一次。

这样做可以避免每次组件重新渲染时都重复计算初始状态的值。

示例：常规初始化 vs. 惰性初始化

1. 常规初始化

const [count, setCount] = useState(localStorage.getItem("count") || 0);

每次组件渲染时，localStorage.getItem("count") 会执行一次，即使 count 的值已经从 localStorage 中获取并且在后续渲染中不需要重新计算。

2. 惰性初始化

const [count, setCount] = useState(() => {
  const savedCount = localStorage.getItem("count");
  return savedCount ? savedCount : 0;
});

在这个例子中，useState 接受一个函数作为参数。这个函数只会在组件首次渲染时执行一次，并返回计算后的值。这样，即使组件之后重新渲染，也不会再次计算这个值，除非组件卸载并重新挂载。

为什么使用惰性初始化

性能优化：如果初始化值的计算很复杂或依赖外部资源（如 localStorage、API 请求等），使用惰性初始化可以避免不必要的重复计算。尤其是在频繁重新渲染的情况下，惰性初始化可以减少性能开销。
减少副作用：如果在 useState 中使用计算逻辑而不是简单的常量，惰性初始化能够确保计算逻辑仅在首次渲染时执行，而不会在每次渲染时都执行，避免不必要的副作用。

示例：从 localStorage 获取值并使用惰性初始化

假设你有一个主题设置（例如，“dark” 或 “light”），并希望在应用加载时从 localStorage 获取用户的设置：

const THEME_LOCAL_STORAGE_KEY = "theme";

// 使用惰性初始化从 localStorage 获取主题设置
const [theme, setTheme] = useState(() => {
  const savedTheme = localStorage.getItem(THEME_LOCAL_STORAGE_KEY);
  return savedTheme || "dark";  // 默认为 "dark"
});