为何useLocalStorage的setValue允许传入函数？与useState API对齐解析

这么做主要是为了让useLocalStorage和React原生useState保持完全一致的API设计——开发者不用额外学习新用法，直接沿用useState的习惯就行。

实际开发中的使用场景 #

当你需要基于当前已存储的值来计算新值时，传函数就非常必要。直接传固定值可能会拿到过时的状态，而传函数能确保获取到最新的存储值来计算。举几个常见例子：

• 计数器累加：比如存在localStorage里的是一个计数，每次点击要加1。如果写setValue(count + 1)，万一count是过时的旧值就会出错；但传setValue(prev => prev + 1)，就能确保用最新的存储值来计算。
• 更新对象/数组：比如存储的是用户信息对象，要修改昵称：

  setUser(prev => ({ ...prev, nickname: '新昵称' }))
  

  或是给存储的数组添加新元素：

  setList(prev => [...prev, '新元素'])
  

• 异步操作后更新：比如发起API请求拿到数据后，要和localStorage里的现有值合并，这时候用函数能确保基于最新的存储值做合并操作。

代码逻辑解析 #

看这段核心代码：

try {
  // Allow value to be a function so we have the same API as useState
  const newValue = value instanceof Function ? value(storedValue) : value

  // Save to local storage
  window.localStorage.setItem(key, JSON.stringify(newValue))

  // Save state
  setStoredValue(newValue)
}

当给setValue传函数时，代码会把当前存在localStorage里的storedValue作为参数传给这个函数，用函数返回的结果作为新值，再同步更新到localStorage和组件状态中，逻辑和useState的函数式更新完全对齐。

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