React使用localStorage时为何getItem的useEffect要优先于setItem

问题核心原因 #

React 会按照你编写 useEffect 的先后顺序执行组件挂载阶段的副作用，这是你调整顺序后功能失效的根本原因。

正确顺序（读取useEffect在前，存储useEffect在后）的挂载执行流程 #

• 组件初始化完成时，contacts 状态的默认值是空数组 []
• 首先执行依赖为空数组的读取逻辑：从 localStorage 中取出之前存储的联系人历史数据，调用 setContacts 把状态更新为真实的历史数据
• 之后执行依赖为 contacts 的存储逻辑：此时 contacts 已经是更新后的历史数据，同步写入 localStorage 不会丢失原有数据

错误顺序（存储useEffect在前，读取useEffect在后）的挂载执行流程 #

• 组件初始化完成时，contacts 状态的默认值是空数组 []
• 首先执行依赖为 contacts 的存储逻辑：直接把当前的空数组写入 localStorage，直接覆盖了之前存储的所有联系人数据
• 之后执行依赖为空数组的读取逻辑：此时取到的是刚被覆盖的空数组，自然无法加载之前的存储内容，功能就异常了

额外提示：你代码里的 localStorage.getItem 写法有冗余参数，这个API只需要接收1个key参数即可，多余的第二个参数 JSON.stringify(contacts) 可以直接删除，正确写法为 localStorage.getItem(LOCAL_STORAGE_KEY)

内容的提问来源于stack exchange，提问作者Sid