泰通建设集团网站网络营销策划与推广

在 React 中，惰性初始化（Lazy Initialization）是一种优化技巧，指的是延迟计算某些状态的初始值，直到组件首次渲染时才进行计算。

这样可以避免不必要的计算，尤其是在初始化值需要通过复杂计算或外部资源获取（如 localStorage、API 请求等）时，惰性初始化有助于提高性能。

在 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 接受一个函数作为参数。这个函数只会在组件首次渲染时执行一次，并返回计算后的值。这样，即使组件之后重新渲染，也不会再次计算这个值，除非组件卸载并重新挂载。

为什么使用惰性初始化

1. 性能优化：如果初始化值的计算很复杂或依赖外部资源（如 localStorage、API 请求等），使用惰性初始化可以避免不必要的重复计算。尤其是在频繁重新渲染的情况下，惰性初始化可以减少性能开销。

2. 减少副作用：如果在 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"
});

总结

• 常规初始化：每次组件重新渲染时，状态的初始值都会重新计算。
• 惰性初始化：仅在组件首次渲染时计算初始值，避免重复计算。

当你需要计算初始化值时，使用惰性初始化可以显著优化性能，特别是当初始化涉及到昂贵的操作时。