在React中操作localStorage时是否必须始终使用useEffect？

直接在组件初始化阶段读取localStorage即可，不用依赖useEffect。因为localStorage是同步API，可以在state初始化时直接获取数据，这样首次渲染时就能拿到数据用于展示。

具体实现方式 #

function MyApp() {
  // 利用useState的初始化函数同步读取localStorage
  const [storedData, setStoredData] = useState(() => {
    // 从localStorage获取数据，处理不存在的情况
    const rawData = localStorage.getItem('yourDataKey');
    return rawData ? JSON.parse(rawData) : []; // 根据你的数据结构设置默认值
  });

  // 更新数据时同步到localStorage
  const handleUpdateData = (newData) => {
    setStoredData(newData);
    localStorage.setItem('yourDataKey', JSON.stringify(newData));
  };

  // 渲染阶段直接使用storedData
  return (
    <div>
      <h2>已存储的数据</h2>
      {storedData.length > 0 ? (
        <ul>
          {storedData.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      ) : (
        <p>暂无数据</p>
      )}
    </div>
  );
}

关键说明 #

• useState的初始化函数只会在组件首次挂载时执行一次，不会在每次渲染时重复读取localStorage，性能没问题
• 一定要处理localStorage中无数据的场景，避免JSON.parse解析null时抛出错误
• 如果数据读取逻辑复杂（比如需要多键值合并、格式转换），可以把读取逻辑抽成单独的函数，比如：

const loadFromLocalStorage = () => {
  const data1 = localStorage.getItem('key1');
  const data2 = localStorage.getItem('key2');
  return {
    data1: data1 ? JSON.parse(data1) : default1,
    data2: data2 ? JSON.parse(data2) : default2
  };
};

// 然后在useState中使用
const [combinedData, setCombinedData] = useState(loadFromLocalStorage);

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